项目中使用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版本)的代码块内容处理
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。