项目中使用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版本)的代码块内容处理


HAAPY
1 声望0 粉丝