vue+wangeditor编辑器实现添加编辑功能填坑

之前我已经发表过了vue+wangeditor编辑器的文章了，今天又玩了一下，发现一个问题，添加是没有问题了，但是如果我在另一个组件里面也使用wangeditor编辑器，运行以后会报错，可能是由于vue是单页应用的缘故，所以我重新修改了一下，把wangeditor单独封装成一个组件来调用

封装代码如下

<template>
    <div id="wangeditor">

        <div ref="editorElem" style="text-align:left"></div>

    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
        props: ['editortext'],
        watch: {
            editortext(newdata) {
                return newdata
            }
        },
        data() {
            return {
                editorContent: this.editortext,
                neweditor: function() {
                    var editor = new E(this.$refs.editorElem)
                    editor.customConfig.onchange = (html) => {
                        window.console.log(html)
                        this.editorContent = html
                    }
                    editor.customConfig.zIndex = 1;
                    editor.customConfig.uploadImgServer = '/upload';
                    editor.create()
                    editor.txt.html(this.editorContent);
                },
                
            }
        },
        mounted() {
            this.neweditor()
        }

    }
</script>

<style>
</style>

调用的时候父组件传入一个editortext代表编辑器的初始值如果是添加的话都是空，默认进入就渲染了一个编辑器，但是如果是编辑功能的话，首先进入页面渲染成功是一个空的编辑器，但点击编辑的时候要动态改变编辑器的值，这个时候我们就需要加一个监听事件，watch监听到数据变化以后我们在给编辑器赋值，editor.txt.html(this.editorContent);只要添加这一句diamante以后就可以实现动态赋值。