vue项目引入富文本编辑器（回显）

实现以下效果：

 

 

 1、安装：

输入命令：npm i wangeditor -S 或 npm install wangeditor

2、使用：

只在需要使用的页面引入就可以，无需全局。

<template>
　　<div>
　　　　<div id="editor" class="editor"></div>
　　</div>
</template>

<script>
import Editor from 'wangeditor'
export default {
  name: 'editor',
  data () {
      return {
        editor: ''
      }
  },
  methods: {
    initEditor () {
      this.editor = new Editor('#editor') /* 括号里面的对应的是html里div的id */
      /* 配置菜单栏 */
      this.editor.customConfig.menu = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ]
      this.editor.customConfig.uploadImgMaxLength = 5 // 限制一次最多上传 5 张图片 */
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 /* 将图片大小限制为 3M 默认为5M /
      /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
      this.editor.customConfig.customUploadImg = async (files, insert) => {
        console.log(files, insert)
        /* files 是 input 中选中的文件列表 */
        let formData = new FormData()
        formData.append('file', files[0])
        /* 调用后台提供的上传图片的接口 */
        let data = 接口返回数据
        /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
        insert(data.imgUrl)
      }
      this.editor.customConfig.onchange = (html) => {
        console.log(html) /* html 即变化之后的内容 */
      }
      this.editor.create() /* 创建编辑器 */ 
      this.editor.txt.html('<H1>用 JS 设置的内容</H1>') /* 默认显示内容-回显 */
    }
  },
  mounted () {
    this.initEditor()
  }
}
</script>

转载于：https://juejin.im/post/5b4ead6a6fb9a04fb4015a4f

官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599