该工具通过高亮显示违禁词并在工具栏中显示违规词的数量,方便用户及时修改。开发利用了百度的UEditor 富文本编辑器,并在其基础上增加了自定义的命令,用于处理违禁词的检测和展示。
功能实现:
1.富文本编辑器集成
为了实现文本编辑功能,我们选择使用 百度 UEditor,该编辑器具有强大的文本编辑和扩展功能,支持富文本输入、图文混排等功能。我们在其基础上通过自定义命令,实现了违禁词的检测和高亮显示。
var ue = UE.getEditor('content1a');
这里通过 UE.getEditor 初始化了编辑器,并设置了服务器 URL,以便处理文本内容的上传和存储。
2.为了实现违禁词检测,我们定义了一个 adwordfilter 命令,核心逻辑通过正则表达式来匹配文本中的违禁词。以下是关键代码部分:
UE.commands['adwordfilter'] = {
execCommand: function (cmd, opt) {
var fw = [];
fw.push('uedit', '视频', '小程序', 'APP', '电脑', '最好');
fw.sort();
var filter = new RegExp('(' + fw.join('|').replace(/\./gi, '\\.') + ')', 'gi');
var me = this;
function HighLight() {
var html = me.getContent();
html = html.replace(/<span>(.*?)<\/span>/gi, '$1');
html = html.replace(filter, '<span>$1</span>');
var root = UE.htmlparser(html);
me.filterInputRule(root);
html = root.toHtml();
me.body[xss_clean] = html;
}
// 高亮显示或提示功能
if (opt) {
switch (opt.toLowerCase().trim()) {
case 'highlight':
HighLight();
break;
case 'prompt':
Prompt();
}
}
}
}
在这个部分中,我们先定义了一个包含违禁词的数组 fw,然后通过 RegExp 创建了一个正则表达式来匹配文本中的违禁词。当文本中出现这些词时,它们会被 <span> 标签包裹,从而实现高亮显示。
3.除了高亮显示违禁词,我们还为用户提供了一个实时的违规词提示,显示在编辑器的工具栏上。具体实现如下:
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));
}
Prompt 函数会计算文本中违禁词的数量,并在工具栏上实时显示。它使用了 match 方法来统计违禁词的数量,并动态更新工具栏的显示内容。
4.为了确保每次用户修改内容时,系统都会及时检查是否有违禁词,编辑器绑定了 contentchange 事件:
UE.getEditor('content1a').addListener('contentchange', function () {
this.execCommand('adwordfilter', 'prompt');
});
每当编辑器内容发生变化时,adwordfilter 命令会被触发,立即进行违禁词检查并显示违规词的数量。
该违禁词提示工具为用户提供了一个非常方便的实时检查机制。它不仅能够高亮显示文本中的违禁词,还能通过工具栏提示用户违规词的数量,帮助用户快速识别和修改不当内容。通过自定义命令与正则表达式的结合使用,我们能够实现高效且简洁的违禁词过滤功能。