Vue中很多用vue-quill-editor编辑器的，但是感觉并不是很好用，于是决定使用以前感觉不错的WangEditor编辑器。
1、安装WangEditor
npm install wangeditor
注：wangeditor全小写
2、封装WangEditor组件（WangEditor.vue）
<template lang="html"><div class="editor"><div ref="toolbar" class="toolbar"></div><div ref="editor" class="text"></div></div></template><script>import E from 'wangeditor'import Settings from '@/settings'export default {name: 'WangEditor',data() {return {editor: null,info_: null}},model: {prop: 'value',event: 'change'},props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false}},watch: {isClear(val) {// 触发清除文本域内容if (val) {this.editor.txt.clear()this.info_ = null}},value: function(value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value)}}//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值},mounted() {this.seteditor()this.editor.txt.html(this.value)},methods: {seteditor() {// http://192.168.2.125:8080/admin/storage/createthis.editor = new E(this.$refs.toolbar, this.$refs.editor)this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片this.editor.customConfig.uploadImgServer = Settings.apiUrl + '/api/CoreService/File/UploadFile' // 配置服务器端地址this.editor.customConfig.uploadImgHeaders = {} // 自定义 headerthis.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2Mthis.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片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', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo', // 重复'fullscreen' // 全屏]this.editor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调},success: (xhr, editor, result) => {// 图片上传成功回调if (result.assertion) {console.log(result.message)}},timeout: (xhr, editor) => {// 网络超时的回调},error: (xhr, editor) => {// 图片上传错误的回调},customInsert: (insertImg, result, editor) => {// 图片上传成功，插入图片的回调//result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]// console.log(result.data[0].url)//insertImg()为插入图片的函数//循环插入图片let url = Settings.apiUrl + ':1889/' + result.objectEntityinsertImg(url)// }}}this.editor.customConfig.onchange = html => {this.info_ = html // 绑定当前逐渐地值this.$emit('change', this.info_) // 将内容同步到父组件中}// 创建富文本编辑器this.editor.create()}}}</script><style lang="css">.editor {width: 100%;margin: 0 auto;position: relative;z-index: 0;}.toolbar {border: 1px solid #ccc;}.text {border: 1px solid #ccc;min-height: 500px;}</style>
this.editor.customConfig.uploadImgServer = Settings.apiUrl + ‘/api/CoreService/File/UploadFile’ // 配置服务器端地址，这个是处理图片上传问题的，比起vue-quill-editor的base64感觉稍微好点，可能我并不太深入了解vue-quill-editor的使用。
3、导入并引用组件
import WangEditor from '@/components/WangEditor'export default {components: {WangEditor}}
<WangEditor v-model="form.bookCatalog"></WangEditor>
4、展示效果
这一块有些东西也没有仔细的调试研究，在样式及部分细微功能可能需要个人细细琢磨。
参考WangEditor云文档：/wangfupeng/wangeditor2/113961
