VUE引入kindeditor、本地化、一键排版样式等操作

文中所有资源可点击此处免费下载

1、创建VUE项目，安装kindeditor

cnpm i kindeditor -S

2、在components下新建KindEditor文件夹，新建Index.vue组件，

<template>
  <div class="margin-top-20">
    <textarea name="content" :id="id" v-model="outContent"></textarea>
    <div style="color: #909399">建议样式：字号18px，2倍行距，文字左对齐，图片居中对齐</div>
    <input type="file" @change="selectedFile" style="display: none" name="imgFile" ref="inputFile" />
  </div>
</template>
<script>
// 引入kindeditor组件
import './config/default/default.css'
import "./config/kindeditor-all-min"
import './config/zh-CN'
// 配置文件
import items from "./config/items.js";
import htmlTags from "./config/htmlTags.js";
import fontSizeTable from "./config/fontSizeTable.js";
import otherConfig from "./config/otherConfig.js";
// import { uploadImg } from "@/api/index.js";
import { postApi } from '../../request/http';
export default {
  name: "kindEditorComponent",
  props: {
    content: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: "kindeditor_id"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    minWidth: {
      type: Number,
      default: 620
    },
    minHeight: {
      type: Number,
      default: 400
    },
    items: {
      type: Array,
      default: function() {
        return [...items];
      }
    },
    htmlTags: {
      type: Object,
      default: function() {
        return { ...htmlTags };
      }
    },
    fontSizeTable: {
      type: Array,
      default: function() {
        return [...fontSizeTable];
      }
    },
    langType: {
      type: String,
      default: "zh-CN"
    },
    themeType: {
      type: String,
      default: "default"
    },
    bodyClass: {
      type: String,
      default: "ke-content"
    },
    ...otherConfig
  },
  data() {
    return {
      editor: null,
      outContent: this.content,
      uploadUrl: process.env.VUE_APP_BASE_URL
    };
  },
  watch: {
    content(val) {
      this.editor && val !== this.outContent && this.editor.html(val);
    },
    outContent(val) {
      this.$emit("update:content", val);
      this.$emit("on-content-change", val);
      this.$emit("input", val);
    }
  },
  mounted() {
    this.initEditor();
    this.editor.clickToolbar("image", () => {
      this.editor.hideDialog();
      this.handleOpenFile();
    });
  },
  activated() {
    this.initEditor();
  },
  deactivated() {
    this.removeEditor();
  },
  beforeDestroy() {
    this.removeEditor();
  },
  methods: {
    handleOpenFile() {
      // let input = document.getElementById("inputFile");
      let input = this.$refs.inputFile;
      input.addEventListener(
        "click",
        function() {
          this.value = "";
        },
        false
      );
      input.click();
    },
    // 图片上传前验证
    beforeUpload(file) {
      const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg";
      if (!isJpgOrPng) {
        this.$message.error("只能上传png/jpg格式的图片!");
      }
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("图片不能超过5MB!");
      }
      return isJpgOrPng && isLt5M;
    },
    async selectedFile($event) {
      let self = this;
      const file = $event.target.files[0];
      if (!self.beforeUpload(file)) return;
      const formData = new FormData();
      formData.append('file', file);
      // 上传文件到服务器
      // postApi(`${this.}`)
      postApi(`${self.uploadUrl}storage/simpleFile/simpleUploadFile?businessSys=ggzyjy-portal&businessType=illustration`, formData, false).then(res => {
        if(res.code == '000000') {
          self.$message({
            message: '上传成功',
            type: 'success',
            center: true
          })
          let url = this.prefix + res.data
          self.editor.insertHtml(`<img style="max-width:100%;" src="${url}" />`)
        }else {
          self.$message({
            message: '上传失败',
            type: 'error',
            center: true
          })
        }
      })
    removeEditor() {
      window.KindEditor.remove(`#${this.id}`);
    },
    initEditor() {
      this.removeEditor();
      this.editor = window.KindEditor.create("#" + this.id, {
        width: this.width,
        height: this.height,
        minWidth: this.minWidth,
        minHeight: this.minHeight,
        items: this.items,
        noDisableItems: this.noDisableItems,
        filterMode: this.filterMode,
        htmlTags: this.htmlTags,
        wellFormatMode: this.wellFormatMode,
        resizeType: this.resizeType,
        themeType: this.themeType,
        langType: this.langType,
        designMode: this.designMode,
        fullscreenMode: this.fullscreenMode,
        basePath: this.basePath,
        themesPath: this.themesPath,
        pluginsPath: this.pluginsPath,
        langPath: this.langPath,
        minChangeSize: this.minChangeSize,
        loadStyleMode: this.loadStyleMode,
        urlType: this.urlType,
        newlineTag: this.newlineTag,
        pasteType: this.pasteType,
        dialogAlignType: this.dialogAlignType,
        shadowMode: this.shadowMode,
        zIndex: this.zIndex,
        useContextmenu: this.useContextmenu,
        syncType: this.syncType,
        indentChar: this.indentChar,
        cssPath: this.cssPath,
        cssData: this.cssData,
        bodyClass: this.bodyClass,
        colorTable: this.colorTable,
        afterCreate: this.afterCreate,
        // 编辑器内容改变回调
        afterChange: () => {
          this.editor ? (this.outContent = this.editor.html()) : "";
        },
        afterTab: this.afterTab,
        afterFocus: this.afterFocus,
        afterBlur: this.afterBlur,
        afterUpload: this.afterUpload,
        uploadJson: this.uploadJson,
        fileManagerJson: this.fileManagerJson,
        allowPreviewEmoticons: this.allowPreviewEmoticons,
        allowImageUpload: this.allowImageUpload,
        allowFlashUpload: this.allowFlashUpload,
        allowMediaUpload: this.allowMediaUpload,
        allowFileUpload: this.allowFileUpload,
        allowFileManager: this.allowFileManager,
        fontSizeTable: this.fontSizeTable,
        imageTabIndex: this.imageTabIndex,
        formatUploadUrl: this.formatUploadUrl,
        fullscreenShortcut: this.fullscreenShortcut,
        extraFileUploadParams: this.extraFileUploadParams,
        filePostName: this.filePostName,
        fillDescAfterUploadImage: this.fillDescAfterUploadImage,
        afterSelectFile: this.afterSelectFile,
        pagebreakHtml: this.pagebreakHtml,
        allowImageRemote: this.allowImageRemote,
        autoHeightMode: this.autoHeightMode,
        fixToolBar: this.fixToolBar,
        tabIndex: this.tabIndex
      });
    }
  }
};
</script>

考虑本地化，从node-modules中找到kindeditor包，
Step1、将kindeditor-all-min.js(或者kindeditor-all.js)放入到KindEditor文件夹，在Index.vue中引入
Step2、修改一键排版功能默认样式以Step1中引入kindeditor-all.js为例，搜索‘quickformat’，该方法中有默认首行缩进样式

找到该行代码，继续添加默认样式，如

// 首行缩进
child.css('text-indent', '2em');
// 默认字体大小
child.css('font-size', '18px');
// 默认行高
child.css('line-height', '2');
// 默认字体
child.css('font-family')

可以继续添加自己需要的样式，在kindeditor-all-min.js中同理，搜索 ‘quickformat’，或者直接搜索 "text-indent","2em"，可以找到 h.css("text-indent","2em"), 在后面可以继续添加自己需要的样式 h.css("text-indent","2em"),h.css("line-height","2"),h.css("font-size","18px"),h.css("font-family","宋体")

Step3、继续在Index.vue中引入样式文件，汉化文件

import './config/default/default.css'
import "./config/kindeditor-all-min"
import './config/zh-CN'

Step4、汉化文件zh-CN.js中，字体(fontName)类型较少，可以根据实际情况，或者参考word中的字体名添加更多字体

以上为 富文本编辑器KindEditor 在Vue中的使用方式，KindEditor组件封装及文件可[点击链接下免费载](https://download.csdn.net/download/qq_38718629/85063881)