vue集成kindeditor富文本的实现示例代码

下面详细讲解一下“Vue集成KindEditor富文本的实现示例代码”的完整攻略：

1. 安装KindEditor

首先，我们需要在项目中安装KindEditor，可以通过以下命令进行安装：

npm install @xdhuxc/kindeditor --save

2. 在main.js中引入和配置KindEditor

在main.js文件中引入KindEditor，并进行配置，代码示例如下：

import Vue from "vue";
import App from "./App.vue";
import KindEditor from "@xdhuxc/kindeditor";
import "@xdhuxc/kindeditor/themes/default/default.css";

Vue.use(KindEditor, {
  editorPath: "/static/kindeditor-all-min.js",
  uploadJson: "/upload",
  fileManagerJson: "/filemanager",
  allowFileManager: true,
  items: ["source", "undo", "redo", "|", "preview", "template", "code", "cut", "copy", "paste", "plainpaste", "wordpaste", "|", "justifyleft", "justifycenter", "justifyright", "justifyfull", "insertorderedlist", "insertunorderedlist", "indent", "outdent", "subscript", "superscript", "clearhtml", "quickformat", "selectall", "|", "fullscreen", "/", "formatblock", "fontname", "fontsize", "|", "forecolor", "hilitecolor", "bold", "italic", "underline", "strikethrough", "lineheight", "removeformat", "|", "image", "flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak", "anchor", "link", "unlink", "|", "about"]
});

new Vue({
  el: "#app",
  render: h => h(App)
});

3. 在Vue组件中使用KindEditor

在需要使用KindEditor的组件中使用以下代码：

<template>
  <div>
    <textarea ref="editor"></textarea>
  </div>
</template>

<script>
export default {
  mounted() {
    const self = this;
    KindEditor.create(self.$refs.editor, {
      allowFileManager: true,
      afterChange: function () {
        self.$emit("input", this.html());
      }
    });
  },
  props: {
    value: {
      type: String,
      required: false
    }
  },
  watch: {
    value(val) {
      if (document.readyState === "complete") {
        const editor = KindEditor.instances[0];
        editor.html(val);
      }
    }
  }
};
</script>

通过上述代码，我们可以在Vue组件中使用KindEditor，并将编辑器所编辑的内容通过$emit事件传递给父组件进行处理。

示例说明

示例一

我们可以在一个Vue组件中，使用KindEditor实现一个带有编辑器的留言板功能。具体流程如下：

在messageBoard.vue中，引入并注册KindEditor：

import KindEditor from "@xdhuxc/kindeditor";
import "@xdhuxc/kindeditor/themes/default/default.css";

export default{
  components:{
    KindEditor
  },
  ...
}

在模板中使用KindEditor：

<KindEditor ref="editor" :value="content" @input="content = arguments[0]"></KindEditor>

在方法中进行数据处理：

methods:{
  onSubmit(){
    .....
    const content = this.$refs.editor.$el.querySelector(".ke-edit-iframe").contentDocument.body.innerHTML;
    .....
  }
}

具体示例可以参考：https://codesandbox.io/s/vue-kindeditor-example-9oxct

示例二

我们可以通过KindEditor实现一个Vue博客编辑器，具体流程如下：

在editor.vue中，引入并注册KindEditor：

import KindEditor from "@xdhuxc/kindeditor";
import "@xdhuxc/kindeditor/themes/default/default.css";

export default{
  components:{
    KindEditor
  },
  ...
}

在模板中使用KindEditor：

<KindEditor ref="editor" :value="content" @input="content = arguments[0]"></KindEditor>

在方法中进行数据和请求处理：

methods:{
  onSubmit(){
    ...
    const content = this.$refs.editor.$el.querySelector(".ke-edit-iframe").contentDocument.body.innerHTML;
    axios.post("/api/save",{title,content});
    ...
  }
}