vue封装编辑器

1. "wangeditor": ">=3.0.0"     package.json  dependencies添加这个依赖

2.  新建一个组件

import E from 'wangeditor'  export default {name:'editor',    data() {return {editorContent:''      }},    /*编辑器的菜单栏 -- 编辑器的内容*/    props: ['menu','html'],    methods: {/*兄弟组件通信*/      borData(){var str =this.editorContent        var txt = str.replace(/style=\"(.*)\"/gi, '').replace(/ /g, '')// console.log(txt)        return txt},      /*父子组件通信*/      getContent:function () {var str =this.editorContent        var txt = str.replace(/style=\"(.*)\"/gi, '').replace(/ /g, '')// console.log(txt)        this.$emit('getHtml', {html: txt})},      some(editor){editor.customConfig.onchange = (html) => {this.editorContent = html}// console.log(this.html)// this.editorContent = this.html        editor.customConfig.menus =this.menueditor.create()/*设置内容，必须编辑器实例化之后*/        editor.txt.html(this.html)/*解决编辑器没有得到焦点的时候,获取不到内容*/        this.editorContent =this.html}},    mounted() {var editor =new E(this.$refs.editor)this.some(editor)},    watch:{html(n,o){var editor =new E(this.$refs.editor)this.some(editor)}}}

3. 引用

import Editorfrom '../common/Editor'

ref="forEditor" :menu="menu" :html="html" style="margin-top: 200px" @getHtml="getData"

data 声明：menu: [], //需要设置的菜单按钮

html:'',