Vue使用wangEditor 封装成独立组件实现富文本编辑器

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 不是官方文档中的 onchangeconsole.log(this.txt.html());// 编辑区域内容变化时，实时打印出当前内容_this.$emit('changeHtml', this.txt.html());}},setMenus() {this.editor.customConfig.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>