CkEditor敏感词过滤高亮提示方法【详细】

发布于:2022-12-27 ⋅ 阅读:(506) ⋅ 点赞:(0)

网上资料少得可怜,蒙着做完记录一下。
第一步:下面是逻辑处理代码(网上抄的),这个代码是放在项目路径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 { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[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 后查看

网站公告

今日签到

点亮在社区的每一天
去签到