ueditor编辑器 字数统计 不算空格 以及 过滤粘贴板格式
前言：
由于项目需要，采用UEditor在线编辑器（百度编辑器 http://ueditor.baidu.com/website/onlinedemo.html）来对文稿进行编排，其中对字数统计有一个需求是，当在ueditor编辑器中敲空格不算字数。
在ueditor.config.js中查找了一翻并没有字数统计时不算空格的配置项，后来在ueditor.all.js中找到了修改处，原来的字数统计是不算制表位\t、回车\r、换行\n的，现在只需把空格\s也加上就好了。
实现：
在ueditor.all.js中搜索 getContentLength 方法名，找到如下代码：
getContentLength: function (ingoneHtml, tagNames) {var count = this.getContent(false,false,true).length;if (ingoneHtml) {tagNames = (tagNames || []).concat([ 'hr', 'img', 'iframe']);count = this.getContentTxt().replace(/[\t\r\n]+/g, '').length;for (var i = 0, ci; ci = tagNames[i++];) {count += this.document.getElementsByTagName(ci).length;}}return count;
},字数统计不算空格功能实现，将上面的代码修改如下：
getContentLength: function (ingoneHtml, tagNames) {var count = this.getContent(false,false,true).length;if (ingoneHtml) {tagNames = (tagNames || []).concat([ 'hr', 'img', 'iframe']);count = this.getContentTxt().replace(/[\t\r\n\s]+/g, '').length; // 加了\sfor (var i = 0, ci; ci = tagNames[i++];) {count += this.document.getElementsByTagName(ci).length;}}return count;
},其他问题：
问题1：UEditor编辑器在初始化完成时，或者，在往编辑器中粘贴内容时，会新增另起一行，自动跟随内容的 <p><br /></p>
原因：由于默认编辑器是不能为空内容的，所以加了 me.body.innerHTML = '<p>' + (browser.ie ? '' : '<br/>') + '</p>';
解决办法：在ueditor.all.js中搜索：domUtils.isEmptyNode(me.body)，然后将 me.body.innerHTML = ' '; 设为空就OK了
// 编辑器不能为空内容if (domUtils.isEmptyNode(me.body)) {// me.body.innerHTML = '<p>' + (browser.ie ? '' : '<br/>') + '</p>';me.body.innerHTML = '';
}问题2：在往编辑器中输入空格时，空格间隔大小长度不一，有的是英文状态下的空格，有的是中文状态下的空格，有的是半角空格，有的是全角空格 【输入法全半角状态切换(同时按下Shift键+Space空格键)】，导致在编辑器输入空格的效果和打印的效果长短不一。
原因：有的用户不知道当前输入法的空格是全角还是半角（在ueditor编辑器中测试，2个全角空格 = 7个半角空格）
解决办法：监听空格键，当按下空格时统一输入全角或半角空格，在 ueditor.all.js文件中添加如下代码：
/*** 对编辑器设置keydown事件监听，绑定快捷键和命令，当快捷键组合触发成功，会响应对应的命令* @method _bindshortcutKeys* @private*/
_bindshortcutKeys: function () {var me = this, shortcutkeys = this.shortcutkeys;me.addListener('keydown', function (type, e) {var keyCode = e.keyCode || e.which;for (var i in shortcutkeys) {var tmp = shortcutkeys[i].split(',');for (var t = 0, ti; ti = tmp[t++];) {ti = ti.split(':');var key = ti[0], param = ti[1];if (/^(ctrl)(\+shift)?\+(\d+)$/.test(key.toLowerCase()) || /^(\d+)$/.test(key)) {if (( (RegExp.$1 == 'ctrl' ? (e.ctrlKey || e.metaKey) : 0)&& (RegExp.$2 != "" ? e[RegExp.$2.slice(1) + "Key"] : 1)&& keyCode == RegExp.$3) ||keyCode == RegExp.$1) {if (me.queryCommandState(i,param) != -1)me.execCommand(i, param);domUtils.preventDefault(e);}}}}});// 添加下面这段代码me.body.addEventListener('keydown', function (e) {var ev = e || window.event;if(32 == ev.keyCode) {ev.preventDefault();ev.stopPropagation();me.execCommand('insertHtml', ' ');return false;}});
},在一般情况下，在html文件中不管输入多少空格，在浏览器中都会自动截去1个以外的其他空格，因为多余的空格外都被当做一个空格。比如你在两个字之间加了10个空格，html会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。
HTML空格字符：
| 说明 | 实体名称(html) | 实体编号(js) |
|---|---|---|
| 半角空格 |   |   |
| 半角空格 |   |   |
| 全角空格 |   |   |
| 正常空格 | |   |
JavaScript转义符：
| 转义序列 | 字符 |
|---|---|
| \b | 退格 |
| \f | 走纸换页 |
| \n | 换行 |
| \r | 回车 |
| \t | 横向跳格 (Ctrl-I) |
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
注：在js中某些地方由于反斜杠本身用作转义符，因此不能直接在脚本中键入一个反斜杠。如在正则中要产生一个反斜杠，须输入两个反斜杠 \\。
问题3：在往编辑器中粘贴内容时，想过滤(修改、删除)掉某些格式，如：标签、样式、属性等
原因：当在外部某个网站上复制一篇文章进来时，想要过滤掉一些格式 如：标签，样式，属性
解决办法：在 ueditor.config.js文件中有相应的配置选项：
UEditor前端配置项说明：http://fex.baidu.com/ueditor/#start-config
- retainOnlyLabelPasted: false //是否在粘贴时只保留标签，去除标签所有属性 。
- pasteplain: true //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴。
- filterTxtRules: function(){} // 纯文本粘贴模式下的过滤规则，可以自定义粘贴板中内容。
filterTxtRules返回的是一个函数(注要：pasteplain: true 才生效哦)，函数的return{ }中就是你想要过滤的标签，由于在过滤规则中不能对粘贴进来的dom元素直接操作(因为这些dom元素还没有被渲染到编辑器中，此时它还是一些字符串，但是编辑器模拟了这些节点)，所以要想操作dom元素，可以通过编辑器提供的uNode类、Api接口，就能完成过滤标签，样式，属性等操作啦！
实例代码：
//粘贴只保留标签，去除标签所有属性
, retainOnlyLabelPasted: false, pasteplain: true //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
//纯文本粘贴模式下的过滤规则
'filterTxtRules': function () {// 过滤caption，th，tr，h1-h6标签 替换为 p标签function transP(node) {node.tagName = 'p';node.attrs.style = ''; //去除该节点的style样式// node.setStyle();}// 过滤a，i标签（直接删除a和i标签，只保留里面的文子内容）function removeDom(node) {node.parentNode.removeChild(node, node.innerText())}// 以下return中的标签及其子节点都会被过滤掉return {//直接删除及其字节点内容'-': 'script style object iframe embed input select','p': { $: {} },'a': removeDom,'i': removeDom,'br': { $: {} },'div': { '$': {} },'li': { '$': {} },'caption': transP,'th': transP,'tr': transP,'h1': transP, 'h2': transP, 'h3': transP, 'h4': transP, 'h5': transP, 'h6': transP,'td': function (node) {//没有内容的td直接删掉var txt = !!node.innerText();if (txt) {node.parentNode.insertAfter(UE.uNode.createText(' '), node);}node.parentNode.removeChild(node, node.innerText())}}
}()
UEditor编辑器的UE.uNode类提供了以下成员方法（这里只例举了部份常用的）
| 方法 | 描述 |
|---|---|
| node | 是函数中的参数，就是被过滤的那个节点(标签) |
| toHtml() | 当前节点对象，转换成html文本 |
| getData() | 获取当前对象的data属性 |
| getIndex() | 获取当前节点在父节点下的位置索引 |
| getNodeById(String id) | 在当前节点下，根据id查找节点 |
| innerText() | 获取节点的纯文本内容 |
| innerText(String textStr) | 设置节点的纯文本内容 |
| innerHTML() | 获取节点的html内容 |
| innerHTML(String htmlstr) | 设置节点的html内容 |
| removeChild(UE.uNode node, Boolean keepChildren) | 从当前节点的子节点列表中，移除节点 |
| appendChild(UE.uNode node) | 在节点的子节点列表最后位置插入一个节点 |
| getAttr(String attrName) | 获取当前节点所代表的元素属性，即获取attrs对象下的属性值 |
| setAttr(String attrName, * attrVal) | 设置当前节点所代表的元素属性，即设置attrs对象下的属性值 |
| getStyle(String name) | 根据样式名称，获取节点的样式值 |
| setStyle(String name, String val) | 给节点设置样式 |
扩展：
我对原UEditor(百度编辑器，PHP1.4.3版)进行了二次开发，新增了一功实用功能 和 修改部分UI界面， 类似 (微信编辑器，微信公众号，图文发布在线编辑器) ，有需要的小伙伴可以参考一下：
代码地址：https://github.com/MuGuiLin/wxEditor
ueditor编辑器 字数统计 不算空格 以及 过滤粘贴板格式相关推荐
- 【百度编辑器ueditor】工具，如何去掉百度编辑器 ueditor 元素路径、字数统计等...
去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,ele ...
- vue3 引用vue-ueditor-wrap中百度编辑器ueditor实例，字数统计
<vue-ueditor-wrapv-model="content":config="myConfig"editor-id="editor-de ...
- ueditor统计字数中文_百度UEditor修改右下角统计字数包含html样式
百度UEditor修改右下角统计字数默认只统计前台所见的文字个数,为了便于展示实际保存的时候是保存的包含html标签的,所以右下角的统计字数功能需要修改 /** * 计算编辑器当前内容的长度 * @n ...
- vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计 写在前面 vue 富文本 quill / vue-quill-editor 如何使用 图片上传到服务器 实时字数统计 图片编 ...
- 字数统计，一个英文字母算一个字，一个汉字算一个字，一个符号算一个字
//============================================================================= // // 字数统计,一个英文字母算一个 ...
- Tinymce 编辑器中字数统计问题，统计所有字符（包括数字，字母。。。）
问题:测试人员发现 在使用 tinymce 编辑器中字数统计不准确问题,只统计了中文字的字数,数字和字母被忽略了.... 具体通过复现发现,的确有这个问题,但是我们通过切换右下角发现是可以切换统计所有 ...
- markdown编辑器typora如何显示文章字数统计
typora如何显示文章字数统计 typora编辑器默认在软件窗口的最下面显示一行状态栏: 状态栏内容从左到右依次为: 显示/隐藏侧边栏 源代码模式切换 拼写检查 字数统计 若不小心将状态栏关闭,则无 ...
- ueditor编辑器自动把空格替换nbsp；的解决办法
在Ueditor编辑器里,直接粘贴一篇编辑好的文章(包括文字.图片)或html源码时,编辑器会自动生成 标签,这样会导致网站前端样式走样.如下图 解决方法: 在ueditor.all.js文件找到上述 ...
- ueditor编辑器初始化
<!-- 加载编辑器的容器 --> <script id="container" name="content" type="text ...
最新文章
- 基于MFCC系数的欧氏距离测量
- 让程序结果在屏幕上暂停一段时间
- Instagram技术透析：Mike Krieger, Instagram at the Airbnb tech talk, on Scaling Instagram
- CFS调度主要代码分析二
- 发邮件向论文作者卑微求代码模板
- 关于对接企业微信第三方服务商所踩的坑
- 使用Inkscape制作网易云音乐LOGO
- oracle 增加字段说明,oracle 增加字段
- 教你如何使用github+jsDelivr搭建免费图床
- Android-黑客技术-实现类似电脑版软件破解版
- 使用jstack排查java应用占用内存过高问题
- android跑马灯监听,android跑马灯成效
- 软件测试周刊（第12期）：程序员在晋升之后会发生什么？
- 什么相片可以两张弄成一张_ps怎么把两张图片合成一张
- 三维建模软件查看器Rocky-view(免费)
- 为你描绘精确的太极图
- 如何快速搭建自己的云桌面和云办公服务器软件系统
- 从巴贝奇、爱达到图灵
- python爬虫数据采集_python爬虫采集
- 什么是AI管道和MLOps？