vue2.x使用jodit富文本编辑器，并配置自定义字体和中文

最近在做邮箱系统时，需要用到功能比较齐全的富文本编辑器，比如表格的全部功能，完整颜色板；筛选了多款编辑器，最终拟定了两种，一个是百度的UEditor，一个是Jodit。

1. UEditor参考网址；
2. Jodit官网 ；

UEditor功能齐全，但目前官网打不开，官方已不再维护，如果使用出现问题的话，不好解决，于是选择了Jodit，之前网上有人说这个也没有更新维护，但是我查看了官网和github上的这个项目，目前还在更新维护中，可以放心使用了，最新版本是：^3.6.6。

Jodit的使用

yarn add jodit //yarn安装
npm install jodit -S //npm安装

新建一个JoditEditor.vue文件，此处代码引用的jodit-vue插件的代码，就是对Jodit的一个简单封装，代码如下：

<template>
  <textarea></textarea>
</template>
<script>
import "jodit/build/jodit.min.css";
import { Jodit } from "jodit";
export default {
  name: "JoditEditor",
  props: {
    value: { type: String, required: true },
    buttons: { type: Array, default: null },
    extraButtons: { type: Array, default: null },
    config: { type: Object, default: () => ({}) },
  },
  data: () => ({ editor: null }),
  computed: {
    editorConfig() {
      const config = { ...this.config };
      if (this.buttons) {
        config.buttons = this.buttons;
        config.buttonsMD = this.buttons;
        config.buttonsSM = this.buttons;
        config.buttonsXS = this.buttons;
      }
      if (this.extraButtons) config.extraButtons = this.extraButtons;
      return config;
    },
  },
  watch: {
    value(newValue) {
      if (this.editor.value !== newValue) this.editor.value = newValue;
    },
  },
  mounted() {
    this.editor = new Jodit(this.$el, this.editorConfig);
    this.editor.value = this.value;
    this.editor.events.on("change", (newValue) =>
      this.$emit("input", newValue)
    );
  },
  beforeDestroy() {
    this.editor.destruct();
  },
};
</script>

在组件中使用

<template>
  <div style="padding-top: 100px">
    <jodit-editor v-model="content" :config="config" />
  </div>
</template>
<script>
import JoditEditor from "./JoditEditor";
export default {
  name: "",
  data() {
    return {
      content: "你是最靓的仔", //编辑器正文内容
      config: {
        //更多配置项请参考jodit官网
        zIndex: 10,
        language: "zh_cn",
        width: "auto",
        height: 500,
        minHeight: 500,
        toolbarStickyOffset: 100,
        saveModeInCookie: false,
      },
    };
  },
  components: {
    JoditEditor,
  },
};
</script>
<style></style>

问题一：不能配置字体

由于这是个国外出品的编辑器，在字体选择时就出现了一个问题，展开的字体列表都是外文字体，没有中文的，而对外暴露的配置项中也没有字体配置，只有修改源码。

解决步骤

• 在node_modules找到jodit包，路径如下：
  \node_modules\jodit\src\plugins\font.ts
  打开font.ts文件，约在代码的110行，往list对象里添加相应字体，注意：左边key值是字体名称，value值是字体别名，就是在富文本编辑器字体列表里显示，可以自定义的，尽量选用一些可免费商用的字体，但前提是系统里有安装相应字体，比如方正喵呜体，windows系统是没有的，需要单独下载安装，配置如下：
  
• 修改完后打包jodit，将项目切换到\node_modules\jodit，注意此处不是项目的最外层，而是node_modules包里面的jodit目录下，执行npm run build或者cnpm run build，但是打包时报错啦
  
  原因在于package.json文件里的scripts里配置了一项：“clean”: “rm -rf build/*”,这里执行的是删除build文件夹，但这个命令在windows10无效，就会报错，解决方法有两种：
  
• 如果终端使用的是cmd，需要修改为 “clean”: “rd /s/q build”，加/q表示强制删除，不需要提示；
  
• 如果是powershell，则需要改为"clean": “Remove-item build”（注意文件删除权限问题）。
• 或者还有一种方式就是直接把clean这一项去掉，将build里的"npm run clean &&"去掉，再手动删除build文件夹。

如果打包过程中如果提示某些包找不到，就先npm install，然后在执行npm run build进行打包
打包成功后需重启项目，此时在jodit编辑器的字体列表就可以看到刚才配置的字体啦。只是后期如果还需要更改的话，得重复此方法，比较麻烦，但好歹能改。效果如下图：

问题二：配置语言为中文简体时，仍有少量英文存在

在将图片插入到编辑器里时，选中图片，点击编辑，然后弹出框里还是有部分英文

解决步骤

同样是在node_modules包下面找到jodit，路径为：node_modules\jodit\src\langs\zh_cn.js，打开zh_cn.js文件，修改对应的值，

Title:'主题',
Alternative:'替换',
Link:'链接',
......

修改后，在node_modules\jodit目录下执行npm run build打包，打包成功后重启项目，可以显示中文了。