該工具通過高亮顯示違禁詞并在工具欄中顯示違規(guī)詞的數(shù)量，方便用戶及時(shí)修改。開發(fā)利用了百度的UEditor 富文本編輯器，并在其基礎(chǔ)上增加了自定義的命令，用于處理違禁詞的檢測(cè)和展示。
功能實(shí)現(xiàn)：
1.富文本編輯器集成
為了實(shí)現(xiàn)文本編輯功能，我們選擇使用 百度 UEditor，該編輯器具有強(qiáng)大的文本編輯和擴(kuò)展功能，支持富文本輸入、圖文混排等功能。我們?cè)谄浠A(chǔ)上通過自定義命令，實(shí)現(xiàn)了違禁詞的檢測(cè)和高亮顯示。
var ue = UE.getEditor('content1a');
這里通過 UE.getEditor 初始化了編輯器，并設(shè)置了服務(wù)器 URL，以便處理文本內(nèi)容的上傳和存儲(chǔ)。
2.為了實(shí)現(xiàn)違禁詞檢測(cè)，我們定義了一個(gè) adwordfilter 命令，核心邏輯通過正則表達(dá)式來匹配文本中的違禁詞。以下是關(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，然后通過 RegExp 創(chuàng)建了一個(gè)正則表達(dá)式來匹配文本中的違禁詞。當(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 方法來統(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ī)詞的數(shù)量，幫助用戶快速識(shí)別和修改不當(dāng)內(nèi)容。通過自定義命令與正則表達(dá)式的結(jié)合使用，我們能夠?qū)崿F(xiàn)高效且簡(jiǎn)潔的違禁詞過濾功能。
