KindEditor富文本编辑器使用页面空白或不展示内容

一、官方文档：

文档 - KindEditor - 在线HTML编辑器

---

二、引入渲染问题导致页面空白

描述：当编辑器创建后，页面初始化未完成，未能挂载进页面导致页面空白，不显示编辑器：

解决：将编辑器初始化函数放进mounted中，页面初始化完成后挂载编辑器

  mounted() {
    var _this = this;
    _this.editor = window.KindEditor.create("#id", {
      width: _this.width,

      height: _this.height,

      minWidth: _this.minWidth,

      .......

    });
  },

注：编辑器初始化参数自行设置

---

三、绑定问题导致页面不显示内容

提示：此处作者自定义组件引入编辑器

子组件：

1.定义变量

   <editor :id="id" :content="content"></editor>

2.props传参数接收父组件传递的值

  props: {
    content: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "editor_id",
    },

  },

3. 定义中间变量（为什么定义中间变量自行百度）

  data() {
    return {
      outContent: this.content,
    };
  },

4.watch监听内容变化

  watch: {
    content(val) {
      this.editor && val !== this.outContent && this.editor.html(val);
    },
    outContent(val) {
      this.$emit("update:content", val);
    },
  },

父组件

 

<template>
   <Kindeditor :content="article" />
</template>

import Kindeditor from "@/components/Kindeditor";

  data() {
    return {
      article:‘123’,
    };
  },

当绑定的数据是变化的，建议使用settimeout延迟方法传入数据

 setTimeout(() => {

 }, timeout);

四、实现效果

---