动态

详情 返回 返回

解決WangEditor4中代碼塊<和>符號被轉義的問題 - 动态 详情

項目中使用WangEditor(v4版本)的代碼塊功能,遇到這樣一個問題,如下所示

點擊插入後,會發現符號被替換了
71838fd8c3c07a44563c0a93e101292.png
這其實是WangEditor(v4版本)防XSS注入的處理方式

但是這樣做又會影響我們發表內容的觀看體驗
image.png

要解決這個問題,需要一點小寄巧

首先,先往代碼塊隨便寫點東西
image.png
然後,後點擊插入,我們就得到了一個代碼塊
image.png
然後,在編輯區域,將代碼塊的內容刪除,保留空的代碼塊
image.png
接着將帶有“<”和“>”符號的代碼複製進去,可以看到,此時符號就不會被轉換了
image.png

發表出去後,內容顯示也不會影響觀看體驗
image.png

補充,對於這樣做之後,怎麼處理xss注入問題,可以使用js-xss庫來解決
Github地址如下
https://github.com/leizongmin/js-xss/blob/master/dist/xss.js

在WangEditor(v4版本)的文檔中也有提及
image.png

在項目中引入js-xss庫

<!--   富文本編輯器-代碼塊-防XSS注入   -->
<script src="./js/js-xss.js"></script>

使用方式

// 獲取編輯器的內容
let content = editor.txt.html();
// 使用filterXSS方法
let safeContent = filterXSS(content);
// 使用處理後的值
document.getElementById('contentInput').value = safeContent;

至此,就完成了WangEditor(v4版本)的代碼塊內容處理

Add a new 评论

Some HTML is okay.