首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Contenteditable / Summernote时获取当前段落文本的计数

Contenteditable是HTML5中的一个属性,它允许用户直接在网页上编辑文本内容。Summernote是一个基于jQuery的富文本编辑器插件,它可以方便地集成到网页中,提供了丰富的编辑功能。

要获取当前段落文本的计数,可以通过以下步骤实现:

  1. 首先,给需要编辑的元素添加contenteditable属性,例如:<div id="editor" contenteditable="true"></div>
  2. 使用JavaScript获取编辑器元素,并监听其内容变化事件:var editor = document.getElementById("editor"); editor.addEventListener("input", function() { // 在内容变化时执行相应的操作 });
  3. 在事件处理函数中,可以通过editor.innerHTML获取当前编辑器中的HTML内容。然后,可以使用正则表达式或其他方法提取纯文本,并计算其长度或字数:var text = editor.innerText || editor.textContent; var count = text.length; // 或者使用text.split(" ").length统计字数 console.log("当前段落文本计数:" + count);

至于推荐的腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,这里无法给出具体链接。但是,腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择相应的产品进行使用。

总结:使用Contenteditable / Summernote时获取当前段落文本的计数,可以通过给编辑元素添加contenteditable属性,使用JavaScript监听内容变化事件,并在事件处理函数中获取编辑器内容并计算文本长度或字数。腾讯云提供了多种云计算服务,可以根据需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【富文本】268- 富文本原理了解一下?

但我自己对富文本又没什么了解,所以顺带稍微看了下富文本的实现方式,特此来沉淀一下,还是那句话不喜勿喷哈?。 ok,这里先简要说下为什么会有富文本这种东西吧?!...contenteditable 属性 假如我们给一个标签加上 contenteditable="true" 的属性,就像这样: contenteditable="true"> 那么在这个...如果想要插入的子节点不可编辑,我们只需要把子节点的属性设置为 contenteditable="false" 即可,就像这样: contenteditable="true"> 这是可编辑的...我们简要列举下它的几个使用方式,大家就知道怎么用了?...: 一句话说就是:通过上面那句命令我们能够获取到当前的选中信息,一般会先保存下来,然后在需要的时候还原。

2K40
  • 【Web技术】421- 富文本原理介绍

    但我自己对富文本又没什么了解,所以顺带稍微看了下富文本的实现方式,特此来沉淀一下,还是那句话不喜勿喷哈?。 ok,这里先简要说下为什么会有富文本这种东西吧?!...contenteditable 属性 假如我们给一个标签加上 contenteditable="true" 的属性,就像这样: contenteditable="true"> 那么在这个...如果想要插入的子节点不可编辑,我们只需要把子节点的属性设置为 contenteditable="false" 即可,就像这样: contenteditable="true"> 这是可编辑的...我们简要列举下它的几个使用方式,大家就知道怎么用了?...: 一句话说就是:通过上面那句命令我们能够获取到当前的选中信息,一般会先保存下来,然后在需要的时候还原。

    1K20

    summernote富文本编辑器基本使用

    summernote富文本编辑器的基本使用 一、简介 二、下载: 三、基本使用: 1、引入js/css 2、建立一个div 3、用 js初始化操作 4、上传图片的Controller 5、过去编辑器内容的代码...spm=1001.2014.3001.5501 三、基本使用: 1、引入js/css <link href="../.....: //获取编辑器的代码 var content=$('#summernote').code(); 6、为编辑器赋值的方法: $('#summernote').code('这里插入内容'); 7、...效果展示: 选择一张图片: 图片选择之后就已经上传到服务器了,我们可以去查看: 查看富文本编辑器的内容转代码: 数据库里面存的就是上面的代码(一定不要存二进制数据)...四、总结 1、我们在文本编辑器选择照片之后图片就已经传到服务器上面了,所以若点击了取消按钮或者关闭文本编辑器的时候就得删除刚刚上传的图片,这个必须处理,要不服务器传的图片一直无法删除。

    2.7K40

    项目之创建静态资源和设置子模块项目、开发简易上传功能(11)

    >进行了配置,则子模块项目在添加时,不需要指定版本号,直接使用父级项目配置的版号,以便于在父级项目中统一管理依赖的版本!...“发表问题”的question/create.html,在发表问题时,使用的富文本编辑Summernote提供了名为callbacks的回调机制,其中,存在名为onImageUpload的回调属性,该属性值是函数...,所以,可以自定义函数配置到这个回调属性中,则后续上传图片时,就会自动触发自定义的函数,通过自定义函数实现图片的上传,并返回上传图片的URL,生成图片插入到Summernote富文本编辑器中即可。...然后,在以上回调中,使用$.ajax()提交异步请求,在处理结果时,创建Image对象,将结果中的图片URL作为Image对象的src属性值,并将整个Image对象(就是一个标签)插入到富文本编辑器中...老师主页显示问题列表-控制器层 在原来的获取学生问题列表的方法中,调用业务方法时多添加type值即可,该值来自UserInfo参数: @GetMapping("/my") public R<PageInfo

    1.6K30

    最新最全自己动手做一个富文本编辑器(附源码 api)

    我们来用大白话说一下富文本编辑器原理 将一个div设置属性 contenteditable="true" 设置加粗,加横线,放大字体等效果 使用 document.execCommand('bold...(IE浏览器不支持) defaultParagraphSeparator: 更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息,请参阅标记生成的差异。...insertBrOnReturn: 控制当按下Enter键时,是插入 br 标签还是把当前块元素变成两个。...insertParagraph: 在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.) insertText: 在光标插入位置插入文本内容或者覆盖所选的文本内容。...最后附上我实现的初版富文本编辑器,最终版是给公司使用的,这里就不再给大家 展示看了

    2.7K20

    不得不安利的富文本编辑器,太赞了!

    我们可以轻松的选中文本来设置文本样式: 同时还能对文本内容进行评论: 当然插入表格和代码等区块也是支持的: 接下来就和大家一起分享一下它的设计思路。...我们可以将一个 contentEditable DOM 元素附加到编辑器实例,并注册侦听器和命令。最重要的是,编辑器允许更新其 EditorState。...我们可以使用 createEditor() API 创建编辑器实例,但是在使用框架绑定(如@lexical/react)时,通常不必担心,因为这会为我们自动处理。...我们还可以使用 editor.getEditorState() 检索当前编辑器状态。...world'); // 添加文本节点到段落 paragraphNode.append(textNode); // 插入元素 root.append(paragraphNode);

    1.3K10

    1.HTML基础必备知识学习笔记

    --元素标签--> 我的第一个段落 我的第二个段落 文本是可见的页面内容,欢迎访问 weiyigeek.top 2.HTML...温馨提示: 在初学时,推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac),我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法,便于手敲记忆。...title 属性 描述: title 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。...语法: contenteditable="true|false"> 参数: 进行拼写检查的可编辑段落且可以编辑内容。 示例: contenteditable="true" spellcheck="true">这是一段可编辑的段落,尝试编辑 data-* 属性 描述: 该全局属性是一类被称为自定义数据属性的属性

    1.3K30

    Notion 编辑器原理分析

    ,文章讲了做一款编辑器为什么不直接使用 contenteditable,但又不能完全抛弃 contenteditable 的原因。...插入一个 block 也是走的 set 命令,其中 args 里面会说明版本号(version)为1,同时当前节点为文本(text)节点。...如用户一个字符一个字符依次输入,我们再撤回时也是一个字符一个字符的删,这显然是不合理的,就像 contenteditable 一样,撤回时一次可删除多个字符,这个缓冲时间就是起这个作用的。...选区 刚讲过文字选区是浏览器 contenteditable 提供的能力,用户鼠标选中区间后,通过浏览器提供的 window.getSelection() api 可以获取出用户选择了哪些文字。 ?...粘帖分成几步: 数据获取:获取剪切版里数据 解析数据:根据数据类型不一样,使用不同的数据解析器来解析数据 数据应用:把解析出来的数据生成 notion 的 op ,通过执行完这些 op ,达到修改数据的目的

    2.6K30

    【实战】我是如何在输入框实现@ At功能的

    ) 当前需求的拆解 按住shift + @ 的时候,弹出通知列表 选择时 @的用户标签插入当前的光标位置中 生成@的用户标签的规则是:高亮、携带用户ID、一键删除信息、不可以编辑。...、可以做为编辑器使用,由于时间原因并没有深入体会、感兴趣的小伙伴可以看一下以下内容 contenteditable-MDN contenteditable实现编辑器,光标、输入法处理 基于contenteditable...$refs.editor)“ 使用ref的方式而不是ID的方式呢? 使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中,所以当您操作这个ref时,它不会干扰其他组件。...当用户使用中文输入法开始输入中文时,compositionstart事件就会被触发。当文中文输入完成或取消时, compositionend 事件将被触发。...: 888}] */ //弹窗列表 - 选人 - 生成@的内容 createSelectElement(name, id, type = 'default') { // 获取当前文本光标的位置

    2.7K20

    可编辑DIV设置光标位置

    平时我们使用文本框input, textarea时,我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他的一些要求....所以有时候我们使用div来代替文本框. 今天为了搞定设置DI的光标位置.头疼啊,终于可以了,记录一下,网上资料不多. 首先要让DIV启用编辑模式....contenteditable=true id="divTest"> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。...下面说怎么获取或设置光标位置. 2个步骤 1:获取DIV中的光标位置 2:改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = function...(); //因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了 r.moveStart

    6.6K40

    项目之关于Summernote的图片处理和基于SpringMVC的文件上传(10)

    关于Summernote的图片处理 使用Summernote富文本编辑器时,当需要处理图片时,会自动将图片转换为Base64编码,当提交问题时,图片的Base64编码会作为“问题正文”的一部分提交到服务器端...Summernote允许在配置Summernote富文本编辑器时自定义回调函数,该函数会在用户填写正文时选择图片会自动调用,则开发人员可以配置这个回调函数,当用户选择图片后,将图片以文件的形式直接上传到服务器端...,当上传成功后,再将图片的路径返回到客户端,插入到Summernote中即可!...在SpringMVC框架中,在控制器端会使用MultipartFile接口类型的参数来接收客户端提交的上传数据,在处理请求的方法中,直接声明这个接口类型的参数即可,参数名应该与客户端提交请求时的名称保持一致...():获取文件大小,以字节为单位; String contentType:获取文档的MIME类型; String getOriginalFilename():获取上传的文件的原始文件名;

    91320

    移动Web开发(二)

    2、属性(attribute)   一些全局属性: id: 元素的唯一标识符           title: 元素的标题           lang: 为元素和包含元素指定语言           ...class: 规定元素的类名   其他特有属性: src: img和script元素,规定显示图像或者外部脚本文件的URL           rel: link和a元素,定义当前文档和被链接文档之间的关系...3、HTML5的全局属性   lang属性:站点国际化。   contentEditable:元素可编辑。(简单的富文本编辑器)   contextmenu: 右键菜单。   ...(文件拖放上传)   hidden:让元素不显示   spellcheck:检测可编辑区域的拼写语法错误   data-*: 存储与HTML相关联的数据(很多JS库都使用data-属性来进行组件或者API...\aside\nav\section   标题式内容:h1\h2\h3\h4\h5\h6\hgroup   段落式内容: a\abbr\image   嵌入式内容:audio\canvas\embed\

    1K20

    实现一个简单的编辑器

    我们最常用的输入文本内容便是 inpu t与t extarea ,使用 contenteditable 属性后,可以在 div , table , p , span , body ,等等很多元素中输入内容...即通过 contenteditable 可以让普通的元素实现可编辑状态。 2. 什么是 Selection Selection 对象表示用户选择的文本范围或插入符号的当前位置。...它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的 Selection 对象,请调用 window.getSelection() 。 3....核心的能力依赖的都是外部的不稳定的功能 5. 脱离execCommand实现编辑器 execCommand 只在编辑器中渲染,完全可以通过使用 dom 的 api 来实现渲染功能。...更重要的一个问题是拥有一个能描述出当前文档的数据结构,并拦截或者是监听用户的输入行为,把对 dom 的操作转换成对文档结构的操作。再把文档的数据映射到 dom 上 ?

    1K20

    summernote toolbar 跟随页面自动滚动

    summernote 是一个功能非常强大的 web 编辑器,可以应用到各种场景下。最近在 Meteor 中做了一个小功能,就是实现 summernote 的 toolbar 跟随页面滚动的效果。...这样即使文章内容很长,要插入一个图片或者使用其他特殊标签的时候,不必滚动页面到最上方去找 toolbar 了。...实现代码 summernote 有一个插件功能,很惭愧,因为个人时间问题,没有去研究如何使用,可以将以下代码封装成 summernote 的插件,这样在任何页面调用 summernote ,toolbar...本文只介绍一下如何在 meteor 应用中使用该函数。...// 如果自适应页面拖动时可以保证 toolbar 不超出编辑器 $toolbar.css('width', `${$editor.width()}px`); } // 如果编辑器的顶部在视野范围内

    27610
    领券