百度编辑器（ueditor）魔改：3、高亮提示、搜索（广告词、违禁词等）

1、增加自定义按钮

2、彻底接管文件上传

3、高亮提示

4、滚动条管理

5、自定义排版

-----------------------------------------------------------

最近广告法实施力度好大，很多词都要下线了，但是新发的时候总得给用户一个提示，所以我们来做一个高亮显示的功能吧。

之前我们追加的按钮adwordfilter就是做这个用的

第一步：定义提醒词条

UE.commands['adwordfilter'] = {execCommand: function (cmd, opt) {var fw = ['最', '最佳', '最具', '最爱', '最赚', '最优', '最优秀', '最好', '最大', '最大程度', '最高'];fw.push('最高档', '最高级', '最奢侈', '最低', '最低级', '最低价', '最底', '最便宜', '时尚最低价', '最流行');fw.push('最受欢迎', '最时尚', '最聚拢', '最符合', '最舒适', '最先', '最先进', '最先进科学', '最先进加工工艺');fw.push('最先享受', '最后', '最后一波', '最新', '最新科技', '最新科学', '与“一”有关', '第一', '中国第一');fw.push('全网第一', '销量第一', '排名第一', '唯一', '第一品牌', 'NO.1', 'TOP.1', '独一无二', '全国第一', '一流');fw.push('一天', '仅此', '最后一波', '大品牌之一', '国家级', '全球级', '宇宙级', '世界级', '顶级', '顶尖', '尖端');fw.push('顶级工艺', '顶级享受', '极品', '极佳', '绝佳', '绝对', '终极', '极致', '首个', '首选', '独家', '独家配方');fw.push('全国首发', '首款', '全国销量冠军', '国家级产品', '国家', '国家免检', '填补国内空白', '王牌', '领袖品牌');fw.push('世界领先', '领导者', '缔造者', '创领品牌', '领先上市', '至尊', '巅峰', '领袖', '之王', '王者', '冠军');fw.push('史无前例', '前无古人', '永久', '万能', '祖传', '特效', '无敌', '纯天然', '100%', '恭喜获奖', '全民免单');fw.push('倒计时', '趁现在', '仅限', '周末', '周年庆', '特惠趴', '购物大趴', '闪购', '品牌团', '精品团', '单品团');fw.push('随时涨价', '马上降价', '机关推荐', '机关专供', '特供', '质量免检', '免抽检', '老字号', '中国驰名商标');fw.push('特供', '专供', '化解小人', '增加事业运', '招财进宝', '健康富贵', '提升运气', '有助事业', '护身');fw.push('平衡正负能量', '消除精神压力', '调和气压', '逢凶化吉', '时来运转', '万事亨通', '旺人', '旺财', '助吉避凶');fw.push('转富招福', '特效', '高效', '全效', '强效', '速效', '天见效', '周期见效', '超强', '激活', '全方位');fw.sort();fw.sort(function (x, y) {if (x.indexOf(y) > -1) {return -1;} else {return 1;}});var filter = new RegExp('(' + fw.join('|').replace(/\./gi, '\\.') + ')', 'gi');var me = this;}
}

这个词条可以自己任意定义，用数组方式是为了方便维护，然后将词条转成正则，用正则的方式匹配正文，然后加样式进行处理

在定义词条的数组，我们还进行了两次排序，是为了避免出现短词比长词提醒优先的问题，例如“最大”，应该是两个字同时高亮，而不是只有一个最字高亮，所以进行排序

第二步：加上高亮

打开themes\default\iframe.css，这个文件是编辑器内部的样式，如果在编辑器内要显示不同样式，在这里定义即可

.highlight {background:yellow;color:red;}

定义好高亮样式后，在编辑器内的内容，就可以直接追加这个样式了

打开src\adapter\editor.js，找到editor.addListener("afterpaste", function () {这一行，我们在这个事件里追加一个动作

editor.execCommand('adwordfilter','highlight');

目的是在用户将内容粘贴到编辑器时，高亮所有的提醒词

那么，我们的adwordfilter就需要调整一下了

UE.commands['adwordfilter'] = {execCommand: function (cmd, opt) {var fw = ['最', '最佳', '最具', '最爱', '最赚', '最优', '最优秀', '最好', '最大', '最大程度', '最高'];fw.push('最高档', '最高级', '最奢侈', '最低', '最低级', '最低价', '最底', '最便宜', '时尚最低价', '最流行');fw.push('最受欢迎', '最时尚', '最聚拢', '最符合', '最舒适', '最先', '最先进', '最先进科学', '最先进加工工艺');fw.push('最先享受', '最后', '最后一波', '最新', '最新科技', '最新科学', '与“一”有关', '第一', '中国第一');fw.push('全网第一', '销量第一', '排名第一', '唯一', '第一品牌', 'NO.1', 'TOP.1', '独一无二', '全国第一', '一流');fw.push('一天', '仅此', '最后一波', '大品牌之一', '国家级', '全球级', '宇宙级', '世界级', '顶级', '顶尖', '尖端');fw.push('顶级工艺', '顶级享受', '极品', '极佳', '绝佳', '绝对', '终极', '极致', '首个', '首选', '独家', '独家配方');fw.push('全国首发', '首款', '全国销量冠军', '国家级产品', '国家', '国家免检', '填补国内空白', '王牌', '领袖品牌');fw.push('世界领先', '领导者', '缔造者', '创领品牌', '领先上市', '至尊', '巅峰', '领袖', '之王', '王者', '冠军');fw.push('史无前例', '前无古人', '永久', '万能', '祖传', '特效', '无敌', '纯天然', '100%', '恭喜获奖', '全民免单');fw.push('倒计时', '趁现在', '仅限', '周末', '周年庆', '特惠趴', '购物大趴', '闪购', '品牌团', '精品团', '单品团');fw.push('随时涨价', '马上降价', '机关推荐', '机关专供', '特供', '质量免检', '免抽检', '老字号', '中国驰名商标');fw.push('特供', '专供', '化解小人', '增加事业运', '招财进宝', '健康富贵', '提升运气', '有助事业', '护身');fw.push('平衡正负能量', '消除精神压力', '调和气压', '逢凶化吉', '时来运转', '万事亨通', '旺人', '旺财', '助吉避凶');fw.push('转富招福', '特效', '高效', '全效', '强效', '速效', '天见效', '周期见效', '超强', '激活', '全方位');fw.sort();fw.sort(function (x, y) {if (x.indexOf(y) > -1) {return -1;} else {return 1;}});var filter = new RegExp('(' + fw.join('|').replace(/\./gi, '\\.') + ')', 'gi');var me = this;function HighLight() {var html = me.getContent();html = html.replace(/<span class="highlight">(.*?)<\/span>/gi, '$1');html = html.replace(filter, '<span class="highlight">$1</span>');// setContent会触发contentchange事件，所以不使用// me.setContent(html);// 更新内容到编辑器var root = UE.htmlparser(html);me.filterInputRule(root);html = root.toHtml();me.body.innerHTML = html;}if (opt) {switch (opt.toLowerCase().trim()) {case 'highlight':HighLight();break;}}}
}

在我们的定义里，追加一个Highlight方法，对编辑器内容进行调整

第三步：显示提醒词的数量

在我们高亮的同时，我们应该达到这样的效果，在按钮中显示有多少个提醒词，点击按钮时，查找并选中提醒词

那么，我们再来改造一下这个定义

UE.commands['adwordfilter'] = {execCommand: function (cmd, opt) {var fw = ['最', '最佳', '最具', '最爱', '最赚', '最优', '最优秀', '最好', '最大', '最大程度', '最高'];fw.push('最高档', '最高级', '最奢侈', '最低', '最低级', '最低价', '最底', '最便宜', '时尚最低价', '最流行');fw.push('最受欢迎', '最时尚', '最聚拢', '最符合', '最舒适', '最先', '最先进', '最先进科学', '最先进加工工艺');fw.push('最先享受', '最后', '最后一波', '最新', '最新科技', '最新科学', '与“一”有关', '第一', '中国第一');fw.push('全网第一', '销量第一', '排名第一', '唯一', '第一品牌', 'NO.1', 'TOP.1', '独一无二', '全国第一', '一流');fw.push('一天', '仅此', '最后一波', '大品牌之一', '国家级', '全球级', '宇宙级', '世界级', '顶级', '顶尖', '尖端');fw.push('顶级工艺', '顶级享受', '极品', '极佳', '绝佳', '绝对', '终极', '极致', '首个', '首选', '独家', '独家配方');fw.push('全国首发', '首款', '全国销量冠军', '国家级产品', '国家', '国家免检', '填补国内空白', '王牌', '领袖品牌');fw.push('世界领先', '领导者', '缔造者', '创领品牌', '领先上市', '至尊', '巅峰', '领袖', '之王', '王者', '冠军');fw.push('史无前例', '前无古人', '永久', '万能', '祖传', '特效', '无敌', '纯天然', '100%', '恭喜获奖', '全民免单');fw.push('倒计时', '趁现在', '仅限', '周末', '周年庆', '特惠趴', '购物大趴', '闪购', '品牌团', '精品团', '单品团');fw.push('随时涨价', '马上降价', '机关推荐', '机关专供', '特供', '质量免检', '免抽检', '老字号', '中国驰名商标');fw.push('特供', '专供', '化解小人', '增加事业运', '招财进宝', '健康富贵', '提升运气', '有助事业', '护身');fw.push('平衡正负能量', '消除精神压力', '调和气压', '逢凶化吉', '时来运转', '万事亨通', '旺人', '旺财', '助吉避凶');fw.push('转富招福', '特效', '高效', '全效', '强效', '速效', '天见效', '周期见效', '超强', '激活', '全方位');fw.sort();fw.sort(function (x, y) {if (x.indexOf(y) > -1) {return -1;} else {return 1;}});var filter = new RegExp('(' + fw.join('|').replace(/\./gi, '\\.') + ')', 'gi');var me = this;function searchNext() {HighLight();var el = $('.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon');var els = $(me.body).find('.highlight');var sn = parseInt(el.html());sn = isNaN(sn) ? 0 : sn;if (sn >= els.length) { sn = 0; }if (els.length > 0) {els[sn].click();var rng = me.selection.getRange();rng.setStart(els[sn], 0).setEnd(els[sn], 1);rng.select();sn++;if (sn >= els.length) { sn = 0; }}el.html(sn);me.focus();}function Prompt() {$('#adwordfilter').remove();var html = me.getContent();var match = html.match(filter);var cnt = match ? match.length : 0;$('<style id="adwordfilter">.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon:before {content:"广告法违规词提醒：' + cnt + '个词";}</style>').appendTo($(document.documentElement));}function HighLight() {var html = me.getContent();html = html.replace(/<span class="highlight">(.*?)<\/span>/gi, '$1');html = html.replace(filter, '<span class="highlight">$1</span>');// setContent会触发contentchange事件，所以不使用// me.setContent(html);// 更新内容到编辑器var root = UE.htmlparser(html);me.filterInputRule(root);html = root.toHtml();me.body.innerHTML = html;}if (opt) {switch (opt.toLowerCase().trim()) {case 'highlight':HighLight();break;case 'prompt':Prompt();}} else {searchNext();}}
}

我们通过修改.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon:before这个伪类的定义，来修改提醒词数量

点击按钮则执行searchNext来定位提醒词，这里不得不吐槽百度编辑器，居然不支持正则查找

第四步：动态改变提醒词数量

除了粘贴之外，用户也会在编辑器内直接进行编辑修改内容，这个时候提醒词数量会发生变动，所以我们追加一个方法

            $(document).ready(function () {$('textarea[class*=ueditor]').each(function () {var id = $(this).attr('id');UE.getEditor(id, { initialFrameHeight: 500, initialFrameWidth: null });UE.getEditor(id).addListener('contentchange', function () {//console.log(this)this.execCommand('adwordfilter','prompt');})});});

我们对所有样式包含ueditor的textarea进行定义，调用百度编辑器，并在初始化后追加一个监听，当contentchange，即内容变动时，调用adwordfilter里的prompt方法，这样我们在编辑内容时，提醒词数量也就跟随变动了

第五步：动态高亮

这个。。。。老顾并没有实现成功，不是不能动态高亮，而是文盲做不到在用户自行编辑时，光标保留在当前编辑位置

当Hightlight运行后，光标会自动跑到文档首位，老顾折腾了半天，也没把光标弄到编辑时的位置上，这个需要大家帮忙来实现了，毕竟文盲对range和selection不熟悉

出现的问题：Range.js : The given range isn't in document.

在文盲的searchNext时，rng.select()时会出现这个错误

                var rng = me.selection.getRange();rng.setStart(els[sn], 0).setEnd(els[sn], 1);rng.select();

虽然在实际使用中没有发现问题，但是有这么个错误一直向外跳，也很不舒服，那么就在这里寻求一下，rng该怎么写才能不出现这个错误了

最后：再说一句，广告法提示的这些词，未必是一定要删除的，比如说实验条件，光和水是唯一的条件，那么这个地方的“唯一”是不需要删除的，而我们是国内唯一能做到这个深度的企业，这个时候，唯一就是属于违反广告法了，需要删除，但只删这个词，语句都不通顺了，所以，老顾只做高亮提醒，具体处理还是交给编辑和用户去操作吧

百度编辑器（ueditor）魔改：3、高亮提示、搜索（广告词、违禁词等）相关推荐

帝国cms html5 编辑器,帝国CMS修改默认编辑器为百度编辑器UEditor的方法
帝国默认编辑器确实非常难用,今天开拓族做了一个教程用最简单的方法来替换默认编辑器的方法! 同时支持前台投稿和后台发布! 效果演示下载百度编辑器ueditor,将ueditor解压到后上传到帝国的插件 ...
百度编辑器Ueditor 初始化加载内容失败解决办法
原文地址为: 百度编辑器Ueditor 初始化加载内容失败解决办法项目上有用到百度文本编辑器ueditor,在页面加载的时候初始化编辑器内容时候,使用 $.document.ready(functi ...
百度编辑器ueditor插入表格没有边框解决方法
百度编辑器ueditor插入一个表格后,在编辑过程中有表格,但是保存后,在前台网页中没有边框,也没有颜色.找了很久的源码,终于解决了. 打开编辑器根目录下面的ueditor.all.js文件,找到: ...
百度编辑器整合html,怎么把百度编辑器(Ueditor)整合到dedecms中
Ueditor整合dedecms步骤 1ueditor的下载安装到ueditor官网下载最新版的编辑器源码,下载地址:ueditor我下载的是[1.2.4.0 PHP 版本] 到dedecms的目录 ...
百度html在线编辑器插件,百度编辑器UEditor插件DjangoUeditor v1.8.143
DjangoUeditor将Ueditor封装为一个Django app,提供文件/图片等上传功能,提供UEditorField.UEditorWidget等封装类,简化Ueditor在Django中 ...
php百度编辑器精简版,开源web编辑器|百度编辑器ueditor下载1.4.3.4php版下载_久友软件下载...
百度编辑器ueditor是由百度官方推出的开源web编辑器.百度编辑器ueditor能支持用户在网页上进行内容编辑,软件体积十分的轻巧,完全免费开源,加载速度极快,兼容所有主流的浏览器使用,如:Moz ...
【百度编辑器ueditor】工具，如何去掉百度编辑器 ueditor 元素路径、字数统计等...
去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中搜索并将参数elementPathEnabled设置成false即可常用功能开关如下: ,ele ...
百度编辑器ueditor 字符限制
百度编辑器ueditor 字符限制默认只能输入10000个字符修改 ueditor.config.js // ,wordCount:true //是否开启字数统计// ,maximumWords: ...
解决：百度编辑器UEditor，怎么将图片保存到图片服务器，或者上传到ftp服务器的问题（如果你正在用UE，这篇文章值得你看下）
解决:百度编辑器UEditor,怎么将图片保存到图片服务器,或者上传到ftp服务器的问题(如果你正在用UE,这篇文章值得你看下) 参考文章: (1)解决:百度编辑器UEditor,怎么将图片保存到图片 ...
下载百度编辑器ueditor
微信后台开发中, 一个重要的功能是让用户编辑文章发布, 由于我们下载的bootstrap后台模板, 默认的编辑器功能有限, 所以在这里, 我们使用国内一款开源的编辑器--百度编辑器功能强大, 只要你 ...

百度编辑器（ueditor）魔改：3、高亮提示、搜索（广告词、违禁词等）

百度编辑器（ueditor）魔改：3、高亮提示、搜索（广告词、违禁词等）相关推荐

最新文章

热门文章