1500字范文 > vue3使用jodit富文本编辑器自定义各项配置及组件封装

vue3使用jodit富文本编辑器自定义各项配置及组件封装

时间：2022-05-03 16:11:48

常用配置

设置中文

let config = {language: "zh_cn",i18n: {//将语言版本设置为中文后仍然还有部分显示的英文改为中文，左面的key为页面上显示的英文，value则是需要对应显示的中文，目前支持19种语言zh_cn: {//简体中文top: "上",right: "右",bottom: "下",left: "左",Title: "标题",Link: "链接","Line height": "行高",Alternative: "描述","Alternative text": "描述","Lower Alpha": "小写英文字母","Lower Greek": "小写希腊字母","Lower Roman": "小写罗马数字","Upper Alpha": "大写英文字母","Upper Roman": "大写罗马数字",},zh_tw:{//中文繁体Link:'鏈接'}},}

修改前后对比：

字体设置

需要注意的是，所设置的字体需要设备上安装的有才能正常显示，不然没效果。

import {Jodit } from "jodit";let config = {controls: {font: {list: Jodit.atom({//左侧key为电脑上对应字体的名称，右侧value是在编辑器字体下拉列表中展示的名称"Microsoft YaHei": "微软雅黑",KaiTi: "楷体",方正喵呜体: "方正喵呜体","思源宋体 Heavy": "思源宋体",SimHei: "黑体",NSimSun: "新宋体",华文行楷: "华文行楷",}),},}}

CDN的引用

Jodit引用的是外网cdn，有的时候访问不上，这里更换的是七牛cdn，建议更换的插件版本要同原来一致。

let config = {sourceEditorCDNUrlsJS: [// "/ajax/libs/ace/1.4.2/ace.js",原cdn"/ace/1.4.2/ace.js",],beautifyHTMLCDNUrlsJS: ["/js-beautify/1.14.4/beautifier.min.js","/js-beautify/1.14.4/beautify-html.min.js",],}

图片上传

如果不配置，只能使用url链接，不能上传本地图片。

对编辑器中生成的元素添加默认属性

比如引用功能，元素标签是 blockquote，Jodit中生成的引用板块不明显，并未做具体的样式设置。

引用板块设置前后对比：

组件封装

Jodit v3版本的封装比较简单，这里就不一一阐述了，新建JoditEditor.vue，组件代码如下：

<template><textarea id="editorRef" ref="editorRef" name="editor"></textarea></template><script setup>import {ref, onMounted, onBeforeUnmount, watch } from "vue";import "jodit/build/jodit.min.css";import {Jodit } from "jodit";let editorRef = ref(null);const props = defineProps({modelValue: String,config: {type: Object, default: () => ({}) },});const emit = defineEmits(["update:modelValue"]);let editorInstance; //创建示例let config = {theme: "default", //主题：默认default，暗色darkplaceholder: "请输入内容...",zIndex: 10,language: "zh_cn",width: "100%",height: "100%",minHeight: 400,saveModeInCookie: false,toolbarSticky: false, //工具栏设置stickystatusbar: false, //底部状态栏(左：html元素；右：单词数，字符数统计)image: {//图片相关配置editSrc: false,editStyle: false,useImageEditor: false,},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": "大写罗马数字",},},createAttributes: {blockquote: {style: `display: block;padding: 16px;margin: 0 0 24px;border-left: 8px solid #dddfe4;background: #eef0f4;color: rgba(0, 0, 0, 0.5);overflow: auto;word-break: break-word !important;`,class: "blockquote-box", //在css中编写类名对应的样式},},sourceEditorCDNUrlsJS: [// "/ajax/libs/ace/1.4.2/ace.js","/ace/1.4.2/ace.js",],beautifyHTMLCDNUrlsJS: ["/js-beautify/1.14.4/beautifier.min.js","/js-beautify/1.14.4/beautify-html.min.js",],//disablePlugins: "stat", //要禁用的插件，以逗号分割。stat是底部字符数与单词数统计buttons:"source,bold,italic,underline,strikethrough,eraser,superscript,subscript,ul,ol,indent,outdent,left,font,fontsize,paragraph,brush,lineHeight,image,file,video,copyformat,selectall,hr,table,link,symbols,undo,redo,fullsize,preview",controls: {font: {list: Jodit.atom({"Microsoft YaHei": "微软雅黑",KaiTi: "楷体",方正喵呜体: "方正喵呜体","思源宋体 Heavy": "思源宋体",SimHei: "黑体",NSimSun: "新宋体",华文行楷: "华文行楷",}),},},uploader: {url: "/api/uploads", //上传地址isSuccess(res) {return res;},defaultHandlerSuccess(data) {//此处参数的值默认是接口返回的data值console.log("defaultHandlerSuccess", data);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", {...config, ...props.config }); //合并组件传入的配置项并创建实例editorInstance.value = props.modelValue;editorInstance.events.on("change", (newValue) => {emit("update:modelValue", newValue);});});onBeforeUnmount(() => {editorInstance.destruct(); //组件销毁editorInstance = null;});watch(() => props.modelValue,(newValue) => {if (editorInstance.value !== newValue) {editorInstance.value = newValue;}});</script><style lang="less">.jodit-checkbox,.jodit-ui-checkbox__input {appearance: checkbox;-webkit-appearance: checkbox;}.jodit .jodit-input {color: #666;}.jodit-ui-button_variant_primary {background-color: var(--themeColor);}.jodit-ui-button_variant_primary:hover:not([disabled]) {background-color: var(--themeColor-hover);}// .jodit-container {// blockquote-box {// display: block;// padding: 16px;// margin: 0 0 24px;// border-left: 8px solid #dddfe4;// background: #eef0f4;// color: rgba(0, 0, 0, 0.5);// overflow: auto;// word-break: break-word !important;// }// }.jodit-workplace {ol,ul,li {list-style-position: inside;}}</style>

使用封装后的组件：

<template><div class="editor2"><h3 class="title">jodit编辑器示例</h3><jodit-editor v-model="content" :config="config"></jodit-editor></div></template><script setup>import {ref } from "vue";import JoditEditor from "../components/JoditEditor.vue";let content = ref("");//配置项let config = {theme: "default", //主题模式还可以设置为darkheight: 500,};setTimeout(() => {content.value = "改变编辑器的内容";}, 2000);</script><style lang="less" scoped>.editor2 {padding: 10px;}.title {text-align: center;color: var(--themeColor);font-size: 20px;font-family: "思源宋体";}</style>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。