咨询电话:
15628812133
29
2024/11

富文本编辑器处理违禁词的检测和展示

发布时间:2024-11-29 09:38:09
发布者:神棍子
浏览量:
0

该工具通过高亮显示违禁词并在工具栏中显示违规词的数量,方便用户及时修改。开发利用了百度的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 命令会被触发,立即进行违禁词检查并显示违规词的数量。

该违禁词提示工具为用户提供了一个非常方便的实时检查机制。它不仅能够高亮显示文本中的违禁词,还能通过工具栏提示用户违规词的数量,帮助用户快速识别和修改不当内容。通过自定义命令与正则表达式的结合使用,我们能够实现高效且简洁的违禁词过滤功能。

返回列表