vue使用wangeditor富文本编辑器，以及问题归纳

官网请移步：http://www.wangeditor.com/

1.添加

// 安装
npm install wangeditor -s

2.简单使用

封装：

// 引入wangeditor以及样式
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
export default {
  data () {
   return {
      base64: '',
      editor: ''
    }
  },
  methods: {
  	// 初始化
  	init () {
		this.editor = new Editor(`#${this.editorId}`)
		this.editor.customConfig.zIndex = 0
      	this.editor.customConfig.debug = true
		this.editor.create()
	}
  },
  computed: {
    // 设置id，可以根据父级传过来的id进行配置
    editorId () {
      return `editor${this.faId}`
    }
  },
  mounted () {
  	this.init()
  }
}

html部分

<template>
  <div class="editor-wrapper">
    <div :id="editorId" class="ql-editor" :matchvisual='false'></div>
  </div>
</template>

3.优化版，添加图片上传，以及初始化鼠标选中删除偶尔不触发on-change，是否禁止编辑处理，去除粘贴格式，光标丢失问题

1.图片上传功能
注意：create 方法一定要在你所有配置完后在创建

	init () {
      this.isMounted = true
      let URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
      this.editor = new Editor(`#${this.editorId}`)
      if (this.menu.length) {
        this.editor.customConfig.menus = this.menu
      }
      this.editor.customConfig.onchange = (html) => {
        let text = this.editor.txt.text()
        if (this.cache) localStorage.editorCache = html
        this.$emit('input', this.valueType === 'html' ? html : text)
        this.$emit('on-change', html, text)
        if (html === '<p><br></p>') {
          this.editor.txt.clear()
        }
      }
      this.editor.customConfig.onchangeTimeout = this.changeInterval
      // create这个方法一定要在所有配置项之后调用
      // this.editor.customConfig.uploadImgShowBase64 = true
      // this.editor.customConfig.uploadImgServer = 'http://118.190.164.186:8082/admin/upload/aishujuFileUpload'
      this.editor.customConfig.uploadImgServer = URL + 'SQBusiness/fileUploadController/image'
      // let _that = this
      this.editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
          // let reader = new FileReader()
          // reader.readAsDataURL(files[0])
          // console.log(base64Data)
          // reader.onload = e => {
          //   base64Data = reader.result
          // }
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          console.log('SQBusiness/fileUploadController/image')
          console.log(result)
        },
        fail: function (xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          // console.log('SQBusiness/fileUploadController/image')
          // console.log(result)
        },
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          let Imgurl = URL + result.body.data.fileUrl
          insertImg(Imgurl)
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
      this.editor.customConfig.pasteTextHandle = function (content) {
        // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        if (content === '' && !content) return ''
        var str = content
        str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
        str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
        str = str.replace(/<\/?[^>]*>/g, '')
        str = str.replace(/[ | ]*\n/g, '\n')
        str = str.replace(/&nbsp;/ig, '')
        return str
      }
      this.editor.customConfig.zIndex = 0
      this.editor.customConfig.debug = true
      this.editor.customConfig.pasteFilterStyle = false
      this.editor.create()
      this.editor.$textElem.attr('contenteditable', this.canAttr)
      this.editor.txt.html(this.value)
      // 初始化执行监听全选删除问题
      this.onStartClear()
    },

2.鼠标全选删除偶尔不触发on-change事件处理

	// 一开始全选清空无效，直接在 初始化后调用监听事件即可
    onStartClear () {
      document.getElementById(this.editorId).addEventListener('input', () => {
        let content = this.editor.txt.html()
        if (content === '' || content === '<p><br></p>') {
          this.editor.customConfig.onchange()
        }
      })
    }

3.光标乱跑以及是否能编辑处理

watch: {
    // 我这边是因为监听了value,每次数据重新赋值导致，我这边由于前面用了好多，没办法直接变更，
    // 就取巧判断了一下，就一开始赋值
    value: function (newVal, oldVal) {
      if (!oldVal) {
        this.editor.txt.html(this.value)
      }
    },
    // 是否开启可编辑
    canAttr () {
      this.editor.$textElem.attr('contenteditable', this.canAttr)
    }
  },

4.过滤格式

// 这个方法在create前调用，主要过滤的是word的格式，word格式内容太恐怖
filterStyle  () {
	this.editor.customConfig.pasteTextHandle = function (content) {
        // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        if (content === '' && !content) return ''
        var str = content
        str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
        str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
        str = str.replace(/<\/?[^>]*>/g, '')
        str = str.replace(/[ | ]*\n/g, '\n')
        str = str.replace(/&nbsp;/ig, '')
        console.log('****', content)
        console.log('****', str)
        return str
      }
}