一个好看而且很好用的富文本编辑器(wangeditor3)

wangeditor3 是一款轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器

• 安装

  项目基础是vue cli；故推荐使用npm安装,并写入package.json

   npm i wangeditor --save-dev  
  复制代码

• 导入wangeditor

   import Editor from "wangeditor"
   import 'wangeditor/release/wangEditor.min.css'
复制代码

• wangeditor上传图片默认是添加图片网址，因为你还没有配置上传文件的信息，这需要我们手动配置,接口返回数据格式为json，内容为数组，见下

     this.editor = new Editor(`#id`)
     this.editor.customConfig.uploadImgShowBase64 = true   //以base64保存图片
     //this.editor.customConfig.uploadImgServer = '/upload'    //图片上传到服务器，这两种方式只能选一种
     //this.editor.customConfig.showLinkImg = false   //隐藏网络图片
     this.editor.create()
  复制代码

  后台返回数据格式：{"data":["http://127.0.0.1:8080/upload/43f1e5468a64lala.jpg"],"errno":0}
  复制代码

• 本地存储

  wangeditor可以html和text的方式读取编辑器的内容，我们在本地存储的都选择存储html，text存储方式不会存储格式。 在设置本地存储后，本地设置change事件触发间隔(用户修改数据后多少时间内不操作即触发事件)，默认为200毫秒，可修改为任意毫秒。

   this.editor.customConfig.onchangeTimeout = 1000   //间隔修改为1000毫秒
   this.editor.customConfig.onchange = () => {
       localStorage.editorCache=this.editor.txt.html()  //html存储
       localStorage.editorCache=this.editor.txt.text()  //text存储
   }
   this.editor.create()
  复制代码

• 加载本地存储内容

  如果本地有存储内容，则加载本地存储

  let html = localStorage.editorCache
  if (html) this.editor.txt.html(html)
  复制代码

  写在最后

  你说xss？UEditor插件是这么干的

    prohibitXss (str, reg) {  //reg是你自定义的正则，可以不写；str是需要过滤的文本
        return str ? str.replace(reg || /[<">']/g,  (a)=>{
            return {
                '<': '<',
                '&': '&',
                '"': '"',
                '>': '>',
                "'": '''
            }[a]
  
        }) : '';
    }
    
    
    html(str) {  //后端返回的数据处理
        return str ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g,  (m)=> {
            return {
                '<': '<',
                '&': '&',
                '"': '"',
                '>': '>',
                '&#39;': "'",
                ' ': ' '
            }[m]
        }) : '';
    }
  复制代码

  ---

  写错了请指正，谢谢   附wangeditor使用手册