KindEditor 在 element-ui dialog 组件中使用问题总结

KindEditor 版本为：4.1.12
element-ui 版本为：2.13.0

基于 KindEditor 封装组件如下。

<template>
    <div class="editor">
        <textarea :id="id"></textarea>
    </div>
</template>

<script>
let keditorUUID = 0;
export default {
    name: "v-editor",
    props: {
        disabled: Boolean
    },
    data() {
        return {
            id: "keditor-" + keditorUUID++
        };
    },

    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.editor = KindEditor.create("#" + this.id, {
                resizeType: 1,
                height: "200px",
                allowPreviewEmoticons: false,
                allowImageUpload: false,
                width: "100%",
                items: [ "fontname", "fontsize",  "|", "forecolor", "hilitecolor", "bold",  "italic",
                    "underline", "removeformat",
                    "|", "justifyleft", "justifycenter",  "justifyright", "insertorderedlist", "insertunorderedlist", "link"
                ]
            });
        },
        getContent() {
            return this.editor.html();
        },
        setContent(html) {
            this.editor.html(html);
        }
    },
    beforeDestroy() {
        this.editor = null;
    }
};
</script>

在 el-dialog 中使用组件。

<el-dialog title="编辑器" :visible.sync="visible" appendToBody>
    <editor></editor>
</el-dialog>

初次打开对话框的时候，编辑器是可用的。但是如果再次打开对话框，编辑器就失效了。

我们会发现初次打开，编辑器的 iframe 如下图所示。

再次打开时，变成了下面的。

具体不知道是什么原因。但是探究 element-ui 的 el-dialog 源码，发现每次显示对话框，都是把对话框的 append 到 body 中，猜测是这个原因导致。

解决办法就是不要配置 appendToBody，或者是每次显示时重新初始化 KindEditor。