該工具通過(guò)高亮顯示違禁詞并在工具欄中顯示違規(guī)詞的數(shù)量，方便用戶及時(shí)修改。開(kāi)發(fā)利用了百度的UEditor 富文本編輯器，并在其基礎(chǔ)上增加了自定義的命令，用于處理違禁詞的檢測(cè)和展示。

功能實(shí)現(xiàn)：

1.富文本編輯器集成

為了實(shí)現(xiàn)文本編輯功能，我們選擇使用 百度 UEditor，該編輯器具有強(qiáng)大的文本編輯和擴(kuò)展功能，支持富文本輸入、圖文混排等功能。我們?cè)谄浠A(chǔ)上通過(guò)自定義命令，實(shí)現(xiàn)了違禁詞的檢測(cè)和高亮顯示。

var ue = UE.getEditor('content1a');

這里通過(guò) UE.getEditor 初始化了編輯器，并設(shè)置了服務(wù)器 URL，以便處理文本內(nèi)容的上傳和存儲(chǔ)。

2.為了實(shí)現(xiàn)違禁詞檢測(cè)，我們定義了一個(gè) adwordfilter 命令，核心邏輯通過(guò)正則表達(dá)式來(lái)匹配文本中的違禁詞。以下是關(guān)鍵代碼部分：

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();

            }

        }

    }

}

在這個(gè)部分中，我們先定義了一個(gè)包含違禁詞的數(shù)組 fw，然后通過(guò) RegExp 創(chuàng)建了一個(gè)正則表達(dá)式來(lái)匹配文本中的違禁詞。當(dāng)文本中出現(xiàn)這些詞時(shí)，它們會(huì)被 <span> 標(biāo)簽包裹，從而實(shí)現(xiàn)高亮顯示。

3.除了高亮顯示違禁詞，我們還為用戶提供了一個(gè)實(shí)時(shí)的違規(guī)詞提示，顯示在編輯器的工具欄上。具體實(shí)現(xiàn)如下：

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:"違規(guī)詞提醒：' + cnt + '個(gè)詞";}</style>').appendTo($(document.documentElement));

}

Prompt 函數(shù)會(huì)計(jì)算文本中違禁詞的數(shù)量，并在工具欄上實(shí)時(shí)顯示。它使用了 match 方法來(lái)統(tǒng)計(jì)違禁詞的數(shù)量，并動(dòng)態(tài)更新工具欄的顯示內(nèi)容。

4.為了確保每次用戶修改內(nèi)容時(shí)，系統(tǒng)都會(huì)及時(shí)檢查是否有違禁詞，編輯器綁定了 contentchange 事件：

UE.getEditor('content1a').addListener('contentchange', function () {

    this.execCommand('adwordfilter', 'prompt');

});

每當(dāng)編輯器內(nèi)容發(fā)生變化時(shí)，adwordfilter 命令會(huì)被觸發(fā)，立即進(jìn)行違禁詞檢查并顯示違規(guī)詞的數(shù)量。

該違禁詞提示工具為用戶提供了一個(gè)非常方便的實(shí)時(shí)檢查機(jī)制。它不僅能夠高亮顯示文本中的違禁詞，還能通過(guò)工具欄提示用戶違規(guī)詞的數(shù)量，幫助用戶快速識(shí)別和修改不當(dāng)內(nèi)容。通過(guò)自定義命令與正則表達(dá)式的結(jié)合使用，我們能夠?qū)崿F(xiàn)高效且簡(jiǎn)潔的違禁詞過(guò)濾功能。