在vue中使用wangEditor富文本编辑器

1、下载

npm install wangeditor 

2、创建editor子组件

<template>
  <div class="editor">
    <div ref="toolbar"
         class="toolbar">
    </div>
    <div ref="editor"
         class="text">
    </div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  data () {
    return {
      editor: null,
      editorContent: ''
    }
  },
  props: {
    content: String
  }, // 接收父组件的方法
  watch: {
    content () {
      this.editor.txt.html(this.content)
    }
  },
  mounted () {
    this.seteditor()
    this.editor.txt.html(this.content)
  },
  methods: {
    seteditor () {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      this.editor.customConfig.uploadImgServer = '/api/upload' // 配置服务器端地址
      this.editor.customConfig.uploadFileName = 'myfile' // 后端接收上传文件的参数名
      this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 3M
      this.editor.customConfig.uploadImgMaxLength = 5 // 限制一次最多上传 5 张图片
      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
      this.editor.customConfig.menus = [ // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ]
      // 下面是最重要的的方法
      this.editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          this.imgUrl = Object.values(result.data).toString()
        },
        fail: function (xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          let url = Object.values(result.data) // result.data就是服务器返回的图片名字和链接
          JSON.stringify(url) // 在这里转成JSON格式
          insertImg(url)
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }

      this.editor.customConfig.onchange = (html) => {
        this.editorContent = html
        this.$emit('on-change', this.editorContent)
      }

      this.editor.create() // 创建富文本实例
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.editor {
  width: 100%;
  margin: 0 auto;
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  height: 200px;
}
</style>

3、在父组件中引用

<template slot="body">
        <el-form :model="ruleForm"
                 ref="editForm">
          <el-form-item id='ditor-box'
                        label="说明"
                        class="line">
            <editor v-model="ruleForm.content"
                    :content="ruleForm.content"
                    @on-change="onEditorChange"></editor>
          </el-form-item>
        </el-form>
        <div class="footer">
          <v-button @click="submitForm('editForm')">保存</v-button>
        </div>
      </template>

<script>
import editor from '@/components/editor/editor'
export default {
  components: {
    editor
  },
  data () {
    return {
      ruleForm: {
        content: '请编辑内容'
      }
    }
  }
  methods: {
    onEditorChange (val) {
      this.ruleForm.content = val
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

注意，在编辑器里写的内容最后必须加标点符号，或者换行，否则获取不到最后一次写的内容

// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！ editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片

editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器