首页
学习
活动
专区
工具
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="false" 即可,就像这样: 这是可编辑...我们简要列举下它几个使用方式,大家就知道怎么用了?...: 一句话说就是:通过上面那句命令我们能够获取当前选中信息,一般会先保存下来,然后在需要时候还原。

2K40
  • 【前端】HTML属性

    通常会在鼠标移到元素上显示一段工具提示文本(tooltip text) 例 <a href="https://www.jianshu.com/u/769d3d3a9d4b" title="我<em>的</em>简书主页...<em>contenteditable</em> 规定元素内容是否可编辑,true、false 如果元素未设置 <em>contenteditable</em> 属性,那么元素会从其父元素继承该属性。... 链接和图像默认是可拖动<em>的</em> dropzone 规定在元素上拖动数据<em>时</em>,是否拷贝、移动或链接被拖动数据。...spellcheck 规定是否对元素进行拼写和语法检查 例 这是一个<em>段落</em>。... 可以对以下内容进行拼写检查 input 元素中<em>的</em><em>文本</em>值(非密码) 元素中<em>的</em><em>文本</em> 可编辑元素中<em>的</em><em>文本</em> translate 规定是否应该翻译元素内容 例 <p translate

    3.1K10

    summernote文本编辑器基本使用

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

    2.5K40

    项目之创建静态资源和设置子模块项目、开发简易上传功能(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.6K20

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

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

    1.1K10

    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.6K20

    可编辑DIV设置光标位置

    平时我们使用文本框input, textarea,我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他一些要求....所以有时候我们使用div来代替文本框. 今天为了搞定设置DI光标位置.头疼啊,终于可以了,记录一下,网上资料不多. 首先要让DIV启用编辑模式.... 通过设定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():获取上传文件原始文件名;

    90520

    移动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`); } // 如果编辑器顶部在视野范围内

    26810
    领券