wangeditor — 轻量级富文本编辑器

wangeditor 目前国内使用体验最好的开源 Web 富文本编辑器！

官网地址

---

使用步骤：

1.NPM安装:

npm i wangeditor --save

2.引入wangeditor

import wangEditor from 'wangeditor'

3.使用wangeditor

<div id="editorElem"></div>

import wangEditor from 'wangeditor'
import axios from 'axios' //用于本地图片上传使用
export default {
  data(){
    return{
      editor: null,
      imgUrl:'',
      form:{
        coverUrl:"",
        context:'',
      },
    }
  }
}

//在mounted里创建编辑器
 mounted() {
	const editor = new wangEditor(`#editorElem`)
	var that = this
	editor.config.height = 400
	editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
	editor.config.uploadImgMaxLength = 1 // 一次最多上传 1 个图片
	editor.config.customUploadImg = function (resultFiles, insertImgFn) {
	  // resultFiles 是 input 中选中的文件列表
	  // insertImgFn 是获取图片 url 后，插入到编辑器的方法
	  // 上传图片
	  let formData = new FormData();
	  formData.append("file", resultFiles[0]);
	  axios.post(process.env.VUE_APP_API + "/web/base/file/upload",formData)
	    .then((response) => {
	      that.imgUrl = response.data.data;//拿到后台返回的签名数据
	      // 上传图片，返回结果，将图片插入到编辑器中
	      insertImgFn(that.imgUrl)
	    });
	}
	// 配置 onchange 回调函数，将数据同步到 vue 中
	editor.config.onchange = (newHtml) => {
	  this.form.context = newHtml
	}
	// 创建编辑器
	editor.create()
	this.editor = editor
	//如果是编辑需要回显
	//this.editor.txt.html(this.form.context)
},
beforeDestroy() {
 // 调用销毁 API 对当前编辑器实例进行销毁
  this.editor.destroy()
  this.editor = null
}

注：如果富文本上面有下拉框，下拉框内容被遮挡的情况下，可以设置以下样式！

/deep/ .w-e-toolbar{
  z-index: 3 !important;
}
/deep/ .w-e-text-container {
  z-index: 2 !important;
}