首页
学习
活动
专区
工具
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监听内容变化事件,并在事件处理函数中获取编辑器内容并计算文本长度或字数。腾讯云提供了多种云计算服务,可以根据需求选择适合的产品。

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

相关·内容

【前端】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

3K10

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

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

1.9K40

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.3K40

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

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

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

2.4K20

Notion 编辑器原理分析

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

2.4K30

可编辑DIV设置光标位置

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

6.4K40

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

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

88420

移动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 上 ?

98920

summernote toolbar 跟随页面自动滚动

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

20610

初探富文本之富文本概述

基于浏览器提供contenteditable实现富文本编辑。 2. 使用浏览器document.execCommand执行命令操作。 早期轻量编辑器。 较短时间内快速完成开发。...可定制空间非常有限。 L1 1. 基于浏览器提供contenteditable实现富文本编辑。 2. 数据驱动,自定义数据模型与命令执行。 石墨文档、飞书文档。 满足绝大部分使用场景。...简单来说就是构建一个描述文档结构与内容数据模型,并且使用自定义execCommand对数据描述模型进行修改。类似于MVVM模型,当执行命令,会修改当前模型,进行表现到视图渲染上。...& Paste 复制粘贴也是一个比较核心概念,因为在当前文本编辑器中我们通常是维护了一套自定义程度非常高DOM结构,例如我们使用一级标题时候可能不会去使用H1标签,而是通过div去模拟,以避免... 而对于粘贴行为,我们就需要通过监听onPaste事件,通过event.clipboardData.getData("text/html")来获取当前粘贴text/html字符串,当然如果没有的话就取得

1.7K10

项目知识盲区整理4

()获取HttpServletRequest,HttpServletResponse 拦截器HandlerInterceptorAdapter使用方法 设置拦截器为false返回Body @ControllerAdvice...异常分析 RedisTemplate操作Redis Redis设置密码登录 使用Mybatis-Plus查询某些字段为null 情况,自动驼峰 org.thymeleaf.exceptions.TemplateInputException...nginx中分发作用 web项目中路径问题 redis命令大全 Redis中删除过期Key三种策略 ---- 常用富文本编译器集合 1.UEditor UEditor 2.wangEditor wangEditor...使用方法 ---- 设置拦截器为false返回Body Spring Boot笔记-设置拦截器为false返回Body springboot拦截器处理返回false请求 ---- @ControllerAdvice...=126433zdh ---- 使用Mybatis-Plus查询某些字段为null 情况,自动驼峰 在我们使用mybatis plus , mybatis plus 可以帮我们自动封装我们实体类用来查询添加

47610
领券