Vue 手把手教你使用 kindeditor

Vue 手把手教你使用 kindeditor

第一步：

npm install kindeditor

第二步：创建富文本组件

建立以.vue结尾的单文件

<template>
  <!--
         参数：
        content：传进来的数据
        @kindeditorChange：获取数据的事件 传回一个参数：数据
  -->
  <div class="kindeditor">
    <editor
      :id="id"
      :height="height"
      :width="width"
      :content="content"
      :items="items"
      :resizeType="resizeType"
       pluginsPath="/static/kindeditor/plugins/"
      :loadStyleMode="false"
      :fullscreenMode="fullscreenMode"
      :afterCreate="afterCreate"
      :uploadJson=" rootDir + '/api/Upload/uploadImg2'"
      @on-content-change="onContentChange"
    ></editor>
    <!-- :uploadJson=" rootDir + '/api/Upload/uploadImg'" -->
  </div>
</template>

<script>
import Vue from 'vue'
import VueKindEditor from 'vue-kindeditor'
import 'kindeditor/kindeditor-all-min.js'
import 'kindeditor/themes/default/default.css'
Vue.use(VueKindEditor);

export default {
  name: "kindeditor",
  data() {
    return {
      items: [
        "fontsize",
        "forecolor",
        "bold",
        "italic",
        "underline",
        "undo",
        "redo",
        "justifyleft",
        "justifycenter",
        "justifyright",
        "justifyfull",
        "wordpaste",
        "selectall",
        "image",
        "link",
        "subscript",
        "superscript",
        "insertorderedlist",
        "insertunorderedlist",
        "fullscreen",
      ],
      resizeType:0,
      random:Math.random(),
    };
  },
  props:{
      width: {
      type: String,
      default: '100%'
    },
      height: {
      type: String,
      default: '400px'
    },
    content:{
      type: String,
    },
    id:{
      type:String,
      default:'editor_id'
    },
    fullscreenMode:{
      type:Boolean,
      default:false
    },
    afterCreate:Function,
    isDeletImg:{
      type:Boolean,
      default:false
    },
  },
  created(){
    if(this.isDeletImg){
        this.items = [
          "fontsize",
          "forecolor",
          "bold",
          "italic",
          "underline",
          "undo",
          "redo",
          "justifyleft",
          "justifycenter",
          "justifyright",
          "justifyfull",
          "wordpaste",
          "selectall",
          "link",
          "subscript",
          "superscript",
          "insertorderedlist",
          "insertunorderedlist",
          "fullscreen",
        ]
        
      }
  },
  methods: {
    onContentChange(val) {
      this.editorText = val;
      this.$emit("kindeditorChange", this.editorText);
    },
  }
};
</script>

<style>
</style>

第三步：注册全局组件（关于如何创建全局自定义组件就不在赘述）

import kindeditor from '@/components/kindeditor.vue；
Vue.component('kindeditor',kindeditor);

第四部：组件中使用

   <kindeditor
                @kindeditorChange="kindeditorChange"
                :content="ruleForm.article"
                :id="'kin'+ index"
              />

如果你感觉有收获，欢迎给我点个 Star 、或者收藏一下，都是对我最大的鼓励，我会更有动力输出有价值的内容。