項目中使用WangEditor(v4版本)的代碼塊功能,遇到這樣一個問題,如下所示
點擊插入後,會發現符號被替換了
這其實是WangEditor(v4版本)防XSS注入的處理方式
但是這樣做又會影響我們發表內容的觀看體驗
要解決這個問題,需要一點小寄巧
首先,先往代碼塊隨便寫點東西
然後,後點擊插入,我們就得到了一個代碼塊
然後,在編輯區域,將代碼塊的內容刪除,保留空的代碼塊
接着將帶有“<”和“>”符號的代碼複製進去,可以看到,此時符號就不會被轉換了
發表出去後,內容顯示也不會影響觀看體驗
補充,對於這樣做之後,怎麼處理xss注入問題,可以使用js-xss庫來解決
Github地址如下
https://github.com/leizongmin/js-xss/blob/master/dist/xss.js
在WangEditor(v4版本)的文檔中也有提及
在項目中引入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版本)的代碼塊內容處理