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

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

UEditor参考网址；
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打包，打包成功后重启项目，可以显示中文了。