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

最新推荐文章于 2022-05-13 22:03:38 发布

weixin_34025151

最新推荐文章于 2022-05-13 22:03:38 发布

阅读量1.3k

点赞数

文章标签： python php json

原文链接：https://juejin.im/post/5bbd8be35188255c5644c1be

版权

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 {
              '<': '&lt;',
              '&': '&amp;',
              '"': '&quot;',
              '>': '&gt;',
              "'": '&#39;'
          }[a]

      }) : '';
  }
  
  
  html(str) {  //后端返回的数据处理
      return str ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g,  (m)=> {
          return {
              '&lt;': '<',
              '&amp;': '&',
              '&quot;': '"',
              '&gt;': '>',
              '&#39;': "'",
              '&nbsp;': ' '
          }[m]
      }) : '';
  }
复制代码