1.使用npm安装:

npm install wangeditor

2.将编辑器封装一个组件，创建editor.vue组件:

<template>
  <div id="editor"></div>
</template>

<script>
	import E from 'wangeditor'
	export default {
		data() {
		  return {
		    editor: ""
		  }
		},
		methods: {
		  init() {
			const _this = this;
			this.editor = new E('#editor');
				
			this.setMenus();//设置菜单
			this.editor.create();//创建编辑器
			this.editor.change = function() { // 这里是change 不是官方文档中的 onchange
			  console.log(this.txt.html());// 编辑区域内容变化时，实时打印出当前内容
			  _this.$emit('changeHtml', this.txt.html());
			}
		  },
		  setMenus() {
			this.editor.config.menus = [
			  'head',  // 标题
			  'bold',  // 粗体
			  'fontSize',  // 字号
			  'fontName',  // 字体
			  'italic',  // 斜体
			  'underline',  // 下划线
			  'strikeThrough',  // 删除线
			  'foreColor',  // 文字颜色
			  'backColor',  // 背景颜色
			  'link',  // 插入链接
			  'list',  // 列表
			  'justify',  // 对齐方式
			  'image',  // 插入图片
			  'table',  // 表格
			  'undo',  // 撤销
			  'redo'  // 重复
			 ]
		  },
		  getHtml() {
		    return this.editor.txt.html();
		  },
		  setHtml(txt) {
		    this.editor.txt.html(txt);
		  }
		},
		mounted() {
		  this.$nextTick(function() {
		     this.init();
		  });
		}
	}
</script>

3.在父组件中使用，引入editor子组件：

<template>
  <div>
    <editor ref="editor"></editor>
    <button @click="save">保存</button>
  </div>
</template>

<script>
import editor from '@/components/common/editor'
export default {
	components:{
		editor
	},
	data () {
	  return {
	    myeditor:"<p>dfasdfasdfsad</p>",
	  }
	},
	methods:{
		init(){
		  this.$refs.editor.setHtml(this.myeditor);
		},
		save(){
		 this.myeditor=this.$refs.editor.getHtml();
		  console.log(this.myeditor)
		}
	},
	mounted () {
	  this.$nextTick(function() {
		this.init();
	  });
	}
}
</script>