引入vuejs + wangEditor富文本编辑器 实现图片上传和格式过滤

这几天项目求给了富文本编辑器的需求，要求功能可以上传图片，因为是引入vuejs，不是脚手架项目，所以不能npm，所以看了下文档，就是 不过，我下载下来了离线包，因为cdn会不怎么稳定。先上代码好了

<div id="div3"></div>  <!-- 按照文档来 -->

  <script>
        parent.topTo();
        //添加 
        var E = window.wangEditor
        var editor = new E('#div3')
        editor.customConfig.pasteFilterStyle = false  //过滤粘贴样式的
        // 自定义处理粘贴的文本内容
        this.editor.customConfig.pasteTextHandle = function (content) {
            // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
            if (content == '' && !content) return ''
            var str = content
           //处理的标签里的多余代码
            str = str.replace(/<\/?span[^>]*>/ig, "")
            str = str.replace(/<\/?font[^>]*>/ig, "")
            str = str.replace(/<\/?o:p>/g, '')
            return str
        }
        // 上传图片到服务器
        editor.customConfig.uploadImgParams = {
            token: token,
        }
        editor.customConfig.uploadImgServer = baseURL + 'sys/api/uploadImgByFile';
        editor.customConfig.uploadFileName = 'file_data'; //设置文件上传的参数名称
        this.editor.customConfig.uploadImgHooks = { //监听
            before: function (xhr, editor, files) {
                // 图片上传之前触发
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                editor.txt.append(`<img src="${result.data}" alt="">`)
            },
            fail: function (xhr, editor, result) {
                Message.error('插入图片失败！')
            },
            error: function (xhr, editor) {
                Message.error('插入图片失败！')
            },
            timeout: function (xhr, editor) {
                Message.error('插入图片失败！')
            },
            customInsert: function (insertImg, result, editor) {
                var url = result.prefix + result.path
                insertImg(url)
            }
        }
        editor.create()
    </script>

可以直接复制代码使用

editor.txt.html(`${row.desctription}`) //富文本回渲
editor.txt.html() //传给后端的

目前也再研究限制图片上传的数量，没研究出来，有做过的大佬们可以留言讨论下
再更新一下。这也是项目上遇到的问题，按理说富文本编辑，不需要过滤样式那些，按照文档上写的，那个过滤方法其实是不行的，自定义呢，又要很多正则去替换，挺麻烦的。这里就需要介绍一个好用的东西。叫xss.js 如果不知道这个的话，我也就懒得解释了，给个别人的链接，自己去看吧
https://www.cnblogs.com/fyjz/p/11905811.html
正题来了，怎么用呢？我先上代码

<script src="/vendors/js/xss.js"></script>

这里我是把这个js下载到本地的。别问我为什么不下载压缩过后的。我喜欢我乐意，我就不下载压缩的，欸，就是玩儿！！！
没有，是我后面有直接在人家的源码上有点修改，所以没下载压缩的。。。。
用法就是

const testText = filterXSS(editor.txt.html())
声明的这个值传后端就好了

这样就ok了，很方便的。