在vite5和vue3开发环境中使用jodit4富文本编辑器，并添加自定义插件和使用highlight.js实现代码块高亮（附其他自定义配置项和全部代码）-编程知识

最近富文本编辑器jodit终于更新发布到了4.0版本，加入了css变量、有更好的typescript支持，截止发文时的版本是：4.0.5，看到有了新版本于是便想着将本地项目中的jodit版本也进行升级，琢磨着再丰富和添加一些功能，就开始了各种踩坑，在这里做个分享。
jodit Pro版集成的功能更多，但需要付费才能使用。
相对于jodit3.x版本，引入方式有了变化，配置项差别不大，对于jodit3.x版本的使用和配置，可以参考我之前发布过的文章 vue3使用jodit富文本编辑器，自定义各项配置及组件封装。对于jodit4.0版本和highlight.js的详细升级内容和使用配置等可参阅官方文档：

jodit官网地址：https://xdsoft.net/jodit；
highlight.js官网地址：https://highlightjs.readthedocs.io/en/latest/readme.html

本文篇幅较长，主要有以下几点：

坑点说明；
添加自定义插件；
使用highlight.js高亮代码块（jodit里面的代码块只是将选中的内容包裹在pre标签中，并没有样式和代码高亮）；
其他配置。

开发环境基于vite5.0.x和vue3.4.x，项目主要依赖和版本如下：

{"dependencies": {"@highlightjs/vue-plugin": "^2.1.0","element-plus": "^2.5.1","highlight.js": "^11.9.0","jodit": "^4.0.5","vue": "^3.4.14","vue-router": "^4.2.5"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.3","sass": "^1.69.6","vite": "^5.0.11","vite-plugin-compression2": "^0.11.0"}
}

jodit4.0版本提供了5种方式可选择使用，分别是：es5、es2015、es2018、es2021、esm（es2021的基础功能版）。一开始我选择使用的是esm的基础版，再按需引入的方式，但这也成为了主要坑点，接下来会讲到，首先安装后引入：

npm i jodit  //或者
yarn add jodit

创建组件JoditEditor，新建index.vue，代码如下：

<template><textarea id="editorRef" ref="editorRef" name="editor"></textarea>
</template><script setup>
import { watch, onMounted, onBeforeUnmount } from "vue";
import "jodit/es2021/jodit.min.css";
import { Jodit } from "jodit/esm/index.js";defineOptions({name: "JoditEditor",
});
const props = defineProps({config: { type: Object, default: () => ({}) },
});
//与父组件传入的值动态绑定
let modelValue = defineModel();//vue3.4.x版本正式支持
//创建Jodit实例
let editorInstance = null;
//配置项
let defaultConfig = {theme: "default", //主题：默认default，暗色darkplaceholder: "请输入内容...",textIcons: false,//工具栏是否显示文字，不用icon图标展示zIndex: 10,language: "zh_cn",//使用中文width: "100%",height: "100%",minHeight: 400,//需要在工具栏上使用到的功能插件buttons: ["source",//源代码"bold",//加粗"italic",//斜体"underline",//下划线"strikethrough",//删除线"eraser", //橡皮擦"|", //分割符"superscript",//上标"subscript",//下标"ul","ol","indent",//增加缩进"outdent",//减少缩进"align", //对齐方式"|","font",//字体"fontsize",//字体大小"paragraph",//格式块，包含标题1~4，引用，代码"brush",//颜色"lineHeight",//行高"|","image",//图片上传"file",//文件上传"copyformat",//复制格式"selectall", //全选"hr",//分割线"table",//表格"link",//超链接"symbols",//特殊符号"undo",//撤销"redo",//恢复"fullsize",//全屏"preview",//预览],
};onMounted(() => {//合并组件传入的配置项并创建实例editorInstance = Jodit.make("#editorRef", {...defaultConfig,...props.config,});//监听编辑器内容变化editorInstance.events.on("change", (newValue) => {modelValue.value = newValue;});console.log(editorInstance);
});onBeforeUnmount(() => {//组件销毁editorInstance.destruct(); editorInstance = null;
});
watch(modelValue, (newValue) => {if (editorInstance.value !== newValue) {editorInstance.value = newValue;}
});
</script><style lang="scss">
.jodit-checkbox,
.jodit-ui-checkbox__input {appearance: checkbox;-webkit-appearance: checkbox;
}
.jodit .jodit-input {color: #666;
}
.jodit-ui-button_variant_primary {background-color: var(--el-color-primary);
}
.jodit-ui-button_variant_primary:hover:not([disabled]) {background-color: var(--el-color-primary-light-3);
}
</style>

组件的使用示例：

<template><div class="Jodit_box"><JoditEditor v-model="content" :config="config" /><el-button type="primary" @click="handleGet" size="large" class="get_btn">获取编辑器内容</el-button></div>
</template><script setup>
import { ref } from "vue";
import JoditEditor from "../components/joditEditor/index.vue";let content = ref("加载初始内容...");
//配置项
let config = {theme: "default", //darkheight: 500,
};
//模拟异步加载初始内容
setTimeout(() => {content.value = `<pre><code class="hljs">let a=123;\n</code></pre>`;
}, 2000);
//获取编辑器内容
function handleGet() {console.log(content.value);
}
</script><style  scoped>
.get_btn {margin-top: 20px;
}
</style>

页面上呈现是这样的：
在这里插入图片描述
工具栏上直接显示文字，而不是图标，显示文字的功能插件就需要单独引入，可以通过路径查找：node_modules/jodit/esm/plugins，插件都在文件夹plugins里面，与在buttons里配置的名字基本一致，引入显示文字的插件：

import "jodit/esm/plugins/add-new-line/add-new-line.js";
import "jodit/esm/plugins/copy-format/copy-format.js";
import "jodit/esm/plugins/fullsize/fullsize.js";
import "jodit/esm/plugins/hr/hr.js";
import "jodit/esm/plugins/line-height/line-height.js";
import "jodit/esm/plugins/preview/preview.js";
import "jodit/esm/plugins/source/source.js";
import "jodit/esm/plugins/symbols/symbols.js";

但是还剩三项eraser（橡皮擦）、align（对齐方式）、selectall（全选），找完了也没有,就用不了。
另外插入页面的表格也只可以在表格中输入，并不能对表格进行编辑，考虑是否因为没有引入完整表格插件的缘故，便试着引入：

import 'jodit/esm/plugins/table/table.js';

这时出现了最大的坑点，出现报错并且页面不能正常显示

在这里插入图片描述
既然不能用，那我删除这行表格引用代码该可以了吧，但是刷新页面后还是这个错误，于是我重启了终端，还是这个错误，清除浏览器缓存甚至重启了浏览器问题依旧，明明引用代码已删除，就很奇怪，第一次遇到这种情况，还有引用select等一些插件也会出现这个错误：

//这个引入也会报错
import 'jodit/esm/plugins/select/select.js';

在这儿折腾了许久，终于找到了两种解决方法，前提都需要先删除导致出错的插件引入代码：

换一个jodit版本，比如切换到上一个版本jodit 4.0.4，但如果在这个版本中继续引入会出错的插件代码，问题一样会出现，又只能切换到另一个版本；
删除node_modules文件夹下的.vite文件夹，然后重启终端。

plugins文件夹下大概有60个左右插件，并未全部测试还有哪些也会报错的，大家可自行测试，按如上方法解决即可。
最后放弃使用esm方式，还是选择使用es2021的全部引入方式，将代码稍做修改：

- // import { Jodit } from "jodit/esm/index.js";
+  import * as JoditEditor from "jodit/es2021/jodit.min.js";
+  let Jodit = JoditEditor?.Jodit;

页面显示效果正常，插入的表格也能编辑
在这里插入图片描述
接下来是自定义代码高亮插件，先安装highlight.js并引入：

npm i highlight.js
//或者
yarn add highlight.js

 import hljs from "highlight.js";import "highlight.js/styles/default.min.css";//引入自己喜欢的主题样式（styles文件夹下有多种主题，可自行选择）// import "highlight.js/styles/atom-one-dark.min.css";import "highlight.js/styles/panda-syntax-dark.min.css";

自定义插件的方式可以通过配置项的extraButtons或者controls，还可以使用Jodit.plugins.add()方法去实现，这里我用的是配置项controls的方式，关键部分都加了注释，代码如下：

import codePng from "../../assets/code.png";
let defaultConfig = {i18n: {zh_cn: {Title: "标题",Link: "链接","Change mode": "html模式",codeBlock: "代码块",//插件的中文名},},//需要在工具栏上使用到的功能插件buttons: [//......,"codeBlock"//添加插件codeBlock
],//创建属性配置（对添加在编辑器内的标签元素添加属性配置，如class、style等）createAttributes: {// 为code标签添加class为 hljscode: {class: "hljs",},},controls: {paragraph: {list: Jodit.atom({h1: "Heading 1",h2: "Heading 2",h3: "Heading 3",h4: "Heading 4",blockquote: "Quote",// pre: 'Source code'//注掉编辑器自带的code代码插入}),},//自定义插件codeBlock: {name: "codeBlock",tooltip: "代 码",//显示在工具栏中插件的图标，也可以是网址，我这里用的是本地的图片iconURL: codePng,//选择使用对应的语言高亮，可自行探索实现//list: ["html", "javascript", "css"],//具体实现方法exec(editor) {//editor.s.html是当前选中的内容，且值是只读的console.log("html", editor.s.html);//创建pre、code元素，highlight.js需要将高亮的代码块放在pre标签里的code标签中let pre = document.createElement("pre");let code = document.createElement("code");//为code元素添加classcode.classList = "hljs";//将字符串中的<br>、</p>加上换行符，不然高亮后的代码不换行并且会显示转义字符，如&gt;等code.innerHTML = editor.s.html.replace(/\<br\>/g, "\n").replace(/\<\/p\>/g, "</p>\n");pre.appendChild(code);//使用hljs对code进行高亮，自动识别，注意highlightElement接收的参数是dom元素，不是字符串hljs.highlightElement(code);//将处理完成后的pre元素插入到编辑器中editor.s.insertHTML(pre);},},},
};
onMounted(() => {//合并组件传入的配置项并创建实例editorInstance = Jodit.make("#editorRef", {...defaultConfig,...props.config,});//监听编辑器内容变化editorInstance.events.on("change", (newValue) => {if (newValue.includes("language-undefined")) {//hljs不能识别或者插入一个空的代码标签时，会加上language-undefined的class，//这里将undefined替换为默认的plaintext文本显示newValue = newValue.replace(/language-undefined/g, "language-plaintext");}modelValue.value = newValue;});
});

有一种情况需要说明一下，直接先在工具栏上先点击插入代码块时，会在编辑器中生成一个空的code标签，此时里面没有任何内容，可以自行输入代码，然后再次点击工具栏的代码块，才能高亮，在输入时高亮并不是实时的。
高亮效果：
在这里插入图片描述

提一下配置项 createAttributes，这是创建属性配置，可以对添加在编辑器内的标签元素添加属性配置，如class、style、dataset等，也就是说当通过插件向编辑器内添加内容时会生成对应的标签元素，比如div、p、blockquote、span等，都会带上配置的属性，示例代码如下：

//配置项中添加createAttributes
let defaultConfig = {//创建标签属性配置（对添加在编辑器内的标签元素添加属性配置，如class、style等）createAttributes: {// 为code标签添加class为 hljscode: {class: "hljs",},//P标签示例，所有的p标签都会添加class="p-box"属性，并添加data-id属性，并设置颜色为红色p: {class: "p-box","data-id": Date.now(),style: {color: "pink",},},},
}

在这里插入图片描述
附上完整代码，其中配置还包括字体、字号、图片上传、中文显示（i18n）等。

<template><textarea id="editorRef" ref="editorRef" name="editor"></textarea>
</template><script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import "jodit/es2021/jodit.min.css";
import * as JoditEditor from "jodit/es2021/jodit.min.js";
import hljs from "highlight.js";
import "highlight.js/styles/default.min.css";
// import "highlight.js/styles/atom-one-dark.min.css";
import "highlight.js/styles/panda-syntax-dark.min.css";
import codePng from "../../assets/code.png";defineOptions({name: "JoditEditor",
});
const props = defineProps({config: { type: Object, default: () => ({}) },
});let modelValue = defineModel();let Jodit = JoditEditor?.Jodit;
//创建Jodit实例
let editorInstance;
//配置项
let defaultConfig = {theme: "default", //主题：默认default，暗色darkplaceholder: "请输入内容...",textIcons: false,//工具栏是否显示文字，不用icon图标展示zIndex: 10,language: "zh_cn",width: "100%",height: "100%",minHeight: 400,saveModeInCookie: false,toolbarSticky: false, //工具栏设置stickystatusbar: false, //底部状态栏(左：html元素；右：单词数，字符数统计)image: {//图片相关配置editSrc: false,editStyle: false,useImageEditor: true,},link: {noFollowCheckbox: false,modeClassName: "",},i18n: {zh_cn: {top: "上",right: "右",bottom: "下",left: "左",Title: "标题",Link: "链接","Line height": "行高",Alternative: "描述","Alternative text": "描述","Lower Alpha": "小写英文字母","Lower Greek": "小写希腊字母","Lower Roman": "小写罗马数字","Upper Alpha": "大写英文字母","Upper Roman": "大写罗马数字","Change mode": "html模式",codeBlock: "代 码",},},//需要在工具栏上使用到的功能插件buttons: ["source", //源代码"bold", //加粗"italic", //斜体"underline", //下划线"strikethrough", //删除线"eraser", //橡皮擦"|", //分割符"superscript", //上标"subscript", //下标"ul","ol","indent", //增加缩进"outdent", //减少缩进"align", //对齐方式"|","font", //字体"fontsize", //字体大小"paragraph", //格式块，包含标题1~4，引用，代码"brush", //颜色"lineHeight", //行高"|","image", //图片上传"file", //文件上传"copyformat", //复制格式"selectall", //全选"hr", //分割线"table", //表格"link", //超链接"symbols", //特殊符号"undo", //撤销"redo", //恢复"fullsize", //全屏"preview", //预览"codeBlock",],//创建属性配置（对添加在编辑器内的标签元素添加属性配置，如class、style等）createAttributes: {// 为blockquote标签添加class为 blockquote-boxblockquote: {class: "blockquote-box",},// 为code标签添加class为 hljscode: {class: "hljs",},//比如P标签示例// p: {//   class: "p-box",//   "data-id": Date.now(),//   style: {//     color: "red",//   },// },},controls: {font: {list: Jodit.atom({"Microsoft YaHei": "微软雅黑",KaiTi: "楷体",方正喵呜体: "方正喵呜体","思源宋体 Heavy": "思源宋体",SimHei: "黑体",NSimSun: "新宋体",华文行楷: "华文行楷",}),},fontsize: {list: Jodit.atom([8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 30, 32, 34, 36, 48,]),},paragraph: {list: Jodit.atom({h1: "Heading 1",h2: "Heading 2",h3: "Heading 3",h4: "Heading 4",blockquote: "Quote",// pre: 'Source code' 注掉编辑器自带的code代码插入}),},//自定义插件codeBlock: {name: "codeBlock",tooltip: "代 码",//显示在工具栏中插件的图标，也可以是网址，我这里用的是本地的图片iconURL: codePng,//选择使用对应的语言高亮，可自行探索实现//list: ["html", "javascript", "css"],//具体实现方法exec(editor) {//editor.s.html是当前选中的内容，且值是只读的console.log("html", editor.s.html);//创建pre、code元素，highlight.js需要将高亮的代码块放在pre标签里的code标签中let pre = document.createElement("pre");let code = document.createElement("code");//为code元素添加classcode.classList = "hljs";//将字符串中的<br>、</p>加上换行符，不然高亮后的代码不换行并且会显示转义字符，如&gt;等code.innerHTML = editor.s.html.replace(/\<br\>/g, "\n").replace(/\<\/p\>/g, "</p>\n");pre.appendChild(code);//使用hljs对code进行高亮，自动识别，注意highlightElement接收的参数是dom元素，不是字符串hljs.highlightElement(code);//将处理完成后的pre元素插入到编辑器中editor.s.insertHTML(pre);},},},//上传配置uploader: {url: "/api/uploadImg2", //上传地址processFileName: (key, file, name) => {//key是指formData数据里的key值，默认为files[0]，后端获取时需要保持key值一致console.log(1, key);console.log(2, file);console.log(3, name);return ["image", file, name];},isSuccess(res) {return res;},defaultHandlerSuccess(data) {//此处参数的值默认是接口返回的data值console.log("defaultHandlerSuccess", data);this.s.insertImage(data.url);// data.forEach((item) => {//   this.s.insertImage(item.url); //将图片插入编辑器中，不可省略// });},defaultHandlerError(err) {console.log("defaultHandlerError", err);this.jodit.events.fire("errorMessage", err);},error(err) {console.log("error", err);this.jodit.events.fire("errorMessage", "文件上传失败");},},
};onMounted(() => {//合并组件传入的配置项并创建实例editorInstance = Jodit.make("#editorRef", {...defaultConfig,...props.config,});editorInstance.value = modelValue.value;editorInstance.events.on("change", (newValue) => {if (newValue.includes("language-undefined")) {//hljs不能识别或者插入一个空的代码标签时，会加上language-undefined的class，// 这里将undefined替换为默认的plaintext文本显示newValue = newValue.replace(/language-undefined/g, "language-plaintext");}modelValue.value = newValue;});console.log(editorInstance);
});onBeforeUnmount(() => {editorInstance.destruct(); //组件销毁editorInstance = null;
});watch(modelValue, (newValue) => {if (editorInstance.value !== newValue) {editorInstance.value = newValue;}
});
</script><style lang="scss">
.jodit-checkbox,
.jodit-ui-checkbox__input {appearance: checkbox;-webkit-appearance: checkbox;
}
.jodit .jodit-input {color: #666;
}
.jodit-ui-button_variant_primary {background-color: var(--el-color-primary);
}
.jodit-ui-button_variant_primary:hover:not([disabled]) {background-color: var(--el-color-primary-light-3);
}
//生成引用标签时的样式
.jodit-wysiwyg {.blockquote-box {display: block;padding: 16px;margin: 0 0 24px;border-left: 8px solid var(--el-color-primary-light-5); //#dddfe4;background: #eef0f4 !important;color: rgba(0, 0, 0, 0.5);overflow: auto;word-break: break-word !important;}
}
</style>