网上资料少得可怜,蒙着做完记录一下。
第一步:下面是逻辑处理代码(网上抄的),这个代码是放在项目路径ckeditor/plugins/sensitivewordshighlight/plugin.js中,这是以插件形式导入,目录没有就需要自己新建,这是参考的官方文档的插件目录结构说明。
CKEDITOR.plugins.add('sensitivewordshighlight', {
init: function (editor) {
/*
* 取消所有高亮
*/
editor.CancleSensitiveWordsHighlight=function () {
var regstrEpswh = '<span class="ep_ckeditor_sensitivewords" style="background-color:[^<>:]+[;]*">([^<>]+)<\/span>';
var htmlEpswh = this.getData();
htmlEpswh = htmlEpswh.replace(eval("/" + regstrEpswh + "/ig"), "$1");
if (this.document != null)
this.document.getBody().setHtml(htmlEpswh);
return htmlEpswh;
}
/*
* words 敏感词
* igChar 敏感词中忽略的特殊字符
* color 高亮底色
*/
editor.SensitiveWordsHighlight = function (epswhlwords, epswhligChar, epswhlcolor) {
//空的字符串
if (typeof epswhlwords == "string" && !epswhlwords)
return;
//空数组
if (typeof epswhlwords == "object" && epswhlwords[0] == undefined)
return;
var htmlEpswh = this.getData();
//高亮模板
var highLighCOde = '<span class="ep_ckeditor_sensitivewords" style="background-color:{$color};">{$word}</span>';
if (!epswhlcolor)
epswhlcolor = "#ffff00";
highLighCOde = highLighCOde.replace("{$color}", epswhlcolor);
//如果内容中有高亮内容先进行清理
if (htmlEpswh.indexOf('ep_ckeditor_sensitivewords') > -1) {
htmlEpswh = this.CancleSensitiveWordsHighlight();
}
//重新高亮
var epswhlkeyWords = [];
if (typeof epswhlwords == "string")
//这里是以什么分隔关键词模板集,具体看自己传入的集是什么而决定
// epswhlkeyWords = epswhlwords.split(',');
epswhlkeyWords = epswhlwords.split("\\r\\n");
else
epswhlkeyWords = epswhlwords;
//需要忽略的分隔符
if (epswhligChar && epswhligChar.length > 0) {
epswhligChar = epswhligChar.replace(/[<>&"]/g, function (c) { return { '<': '<', '>': '>', '&': '&', '"': '"' }[c]; });
epswhligChar = "[" + epswhligChar + "]*";
} else {
epswhligChar = '';
}
for (var i = 0; i < epswhlkeyWords.length; i++) {
var allkey = epswhlkeyWords[i].split('');
var regstr = allkey.join(epswhligChar);
regstr = "(" + regstr + ")";
var reg = eval("/" + regstr + "/ig");
var hcode = highLighCOde.replace("{$word}", "$1");
htmlEpswh = htmlEpswh.replace(reg, hcode);
}
//document 对象在源码模式无效,this.setData是重新加载,不是同步方法,不能使用
if (this.document != null)
this.document.getBody().setHtml(htmlEpswh);
}
}
});
第二步:写好了插件就需要导入插件啊,导入是在/ckeditor/config.js中导入。就这最后一行代码
// 粘贴图片上传
// config.uploadUrl = '/admin/upload/upimg';
config.imageUploadUrl = '/admin/upload/upimg';
// 工具栏图像按钮图片上传
config.filebrowserUploadUrl = '/admin/upload/upimg';
// 上传图片对话框预览框显示文本,不配置则会显示一堆官方文本
config.image_previewText = " ";
// 隐藏左下角标签选择器
config.removePlugins = 'elementspath';
//敏感词
config.extraPlugins = "sensitivewordshighlight";
第三步:引用。是在自己写的页面的js代码中引用。可以在js钩子函数中引用,也可绑定按钮事件触发引用。测试时发现放钩子函数里会有光标乱飘的bug,不知道啥情况。于是就放在事件函数中了。
三个参数,第一个就是需要过滤的敏感词集。
注意: 下面的content要改成自己富文本textarea标签的id
<textarea id="content" name="m.content">#escape(m.content ??)</textarea>
function abc() {
//这两行方式都可以
// CKEDITOR.instances.content.SensitiveWordsHighlight(["一二", "阿斯顿发","哈哈"], "`~!@#$^&*()=|{}':;',\\[\\]\\.<>/?~!@#¥……&*()—|{}【】‘;:”“'。,、? ", "#FFFF00");
CKEDITOR.instances.content.SensitiveWordsHighlight(aa, "`~!@#$^&*()=|{}':;',\\[\\]\\.<>/?~!@#¥……&*()—|{}【】‘;:”“'。,、? ", "#FFFF00");
}
做完的效果:
本文含有隐藏内容,请 开通VIP 后查看