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:'',
网友评论