vue wangEditor 实现富文本编辑器组件

父组件 richText.vue

<template>
	<div>
		<div class="editorBox">
			<editor ref="editor" :catchData="catchData" :content="contentHTML"></editor>
		</div>
	</div>
</template>

<script type="text/javascript">
	import editor from '@/components/tempNews/editor.vue'
	export default {
		data() {
			return {
				contentHTML: '',
			}
		},
		components: {
			editor
		},
		methods: {
                    // 子组件里的内容
                    catchData(html) {
            	        console.log(html);
                    }
		}
	}
</script>

<style type="text/css" scoped="scoped">
	.editorBox { margin-bottom: 10px; }
</style>

子组件 editor.vue

<template>
	<div>
		<div id="editorMenu" class="menu"></div>
		<div id="editorBody" class="body"></div>
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import { MessageBox } from 'element-ui';
	import { uploadPoster } from '@/assets/js/api'
	export default {
		data() {
			return {
				editor: null,
				editContent: '',
				imgFiles: [],
				finish: 0,
			}
		},
		props: ['catchData', 'content'],
		watch: {
			content() {
				this.editor.txt.html(this.content);
			}
		},
		mounted() {
			let self = this;
			this.editor = new E('#editorMenu', '#editorBody');
			this.editor.customConfig.onchange = (html)=>{
			    this.editContent = html;
			    this.catchData(this.editContent);
		    }
            // 配置编辑区域的 z-index
			this.editor.customConfig.zIndex = 1;
            // 自定义文件名
			// this.editor.customConfig.uploadFileName = '';
            // 上传图片的接口
			// this.editor.customConfig.uploadImgServer = API.poster_upload_path;
			// 将图片大小限制为 3M
			this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
			// 限制一次最多上传 5 张图片
			this.editor.customConfig.uploadImgMaxLength = 5;
            // 自定义上传参数
			/*this.editor.customConfig.uploadImgParams = {
			    // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
			    // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
			    accesstoken: this.CONFIG.token,
			    type: 8000,
			    eventid: new Date().getTime()
			};
			// 将参数拼接到 url 中
			this.editor.customConfig.uploadImgParamsWithUrl = true;
			// 监听函数
			this.editor.customConfig.uploadImgHooks = {
				before: function (xhr, editor, files) {
			        // 图片上传之前触发
			        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
			        
			        console.log('uploadImgHooks--before');
			        console.log(files);

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

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

			        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
			        var url = result.url
			        insertImg(url)

			        // result 必须是一个 JSON 格式字符串！！！否则报错
			    }
			}*/
			// 自定义上传图片事件
			this.editor.customConfig.customUploadImg = function (files, insert) {
			    // files 是 input 中选中的文件列表
			    // insert 是获取图片 url 后，插入到编辑器的方法
			    // 上传代码返回结果之后，将图片插入到编辑器中
			    // insert(imgUrl)

			    // console.log(files);
			    self.imgFiles = files;
			    self.finish = 0;
			    self.doUploadImage(imgUrl=>{
			    	insert(imgUrl);
			    });
			}
			this.editor.create();
		},
		methods: {
            // 一次性上传多张图片
		    async doUploadImage(fn) {
			    let self = this;
			    if(self.finish>=self.imgFiles.length) {
				    return;
			    }
			    let file = self.imgFiles[self.finish];
			    let formData = new FormData();
			    formData.append('file', file);
			    let res = await uploadPoster('?accesstoken='+self.CONFIG.token+'&type=8000&eventid='+('homed'+new Date().getTime()), formData);
			    // console.log(res);
			    if(res.status == 200) {
		            if(res.data.ret == 0) {
		                fn(res.data.url);
		                self.finish++;
		                self.doUploadImage(fn);
		            }
		            else {
		                MessageBox.alert(ret.data.ret_msg, '提示', {
		                    type: 'error' 
		                });
		            }
		        }
			}
		}
	}
</script>

<style type="text/css" scoped="scoped">
    .menu {
        border: 1px solid #e6e6e6;
    }
    .body {
        border: 1px solid #e6e6e6;
        border-top: none;
        height: 400px;
    }
</style>

使用小结：

1、wangEditor 插件的菜单和编辑区域其实是两个单独的 <div> ，使用 new() 创建实例的可以分别传入两个对象表示菜单区域和编辑区域

2、编辑区域的 z-index 默认为 10000，可自定义修改。修改之后，编辑区域和菜单的 z-index 会同时生效。

3、上传图片的时候，可以使用监听函数（uploadImgHooks方法）在上传图片的不同阶段做相应处理，也可以自定义实现图片上传处理（customUploadImg方法）。

4、获取 json  格式的内容：可以通过 editor.txt.getJSON() 方法