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

已于 2023-03-16 17:27:34 修改
阅读量4.5k 收藏 7
点赞数
分类专栏： vue 富文本编辑器 文章标签： 前端 vue.js javascript
于 2023-03-16 16:28:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_WangGeGe/article/details/129585943
版权

目录


本文使用时的版本： 

"vue": "^3.2.36"，
"jodit": "^3.24.7"

Jodit 是国外编写的一个功能强大的富文本编辑器，有常规版本和PRO版本，PRO版本功能更全，但需要付费，常规版本也已够用，目前官网没有提供中文文档。
当我们在使用时，会遇到一些问题，比如在设置了编辑器的语言版本为中文后，仍有部分还是英文显示，需要如何修改；还有如何将字体设置为一些常用中文字体；如何设置图片文件上传等等；
如果是在vue2中使用还需要去修改源码，则比较繁琐，具体实现方式可参考我之前发布的文章： vue2.x使用jodit富文本编辑器，并配置自定义字体和中文，本文主要针对于vue3（组合式）中的使用。
在vue3中就比较方便了，不用修改源码，全部可使用配置参数去设置，参数配置项多达159个，全部的配置项可参阅Jodit官网的config，这里列举一些常用项，全部的配置代码放在组件封装一节展示。

常用配置

设置中文

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: [
    // "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js",原cdn
    "https://cdn.staticfile.org/ace/1.4.2/ace.js",
  ],
  beautifyHTMLCDNUrlsJS: [
    "https://cdn.staticfile.org/js-beautify/1.14.4/beautifier.min.js",
    "https://cdn.staticfile.org/js-beautify/1.14.4/beautify-html.min.js",
  ],
}

图片上传

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

let config = {
    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", "文件上传失败");
    },
  },
}

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

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

let config = {
   createAttributes: {
    blockquote: {//可以设置style，也可以设置class
      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中编写类名对应的样式
    },
  },
}

引用板块设置前后对比：
在这里插入图片描述

组件封装

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，暗色dark
  placeholder: "请输入内容...",
  zIndex: 10,
  language: "zh_cn",
  width: "100%",
  height: "100%",
  minHeight: 400,
  saveModeInCookie: false,
  toolbarSticky: false, //工具栏设置sticky
  statusbar: 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: [
    // "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js",
    "https://cdn.staticfile.org/ace/1.4.2/ace.js",
  ],
  beautifyHTMLCDNUrlsJS: [
    "https://cdn.staticfile.org/js-beautify/1.14.4/beautifier.min.js",
    "https://cdn.staticfile.org/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", //主题模式 还可以设置为dark
  height: 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>
上官熊猫
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
jodit-vue:Jodit编辑器的Vue包装器
04-28
乔迪特·维（Jodit Vue） Vue Wrapper 如何使用 安装Jodit Vue ： npm install jodit-vue --save // or with Yarn yarn add jodit-vue 导入并使用 由于此组件只是包装器，因此，如果您使用的是vue-cli来创建应用程序，则需要在应用程序中包含Jodit编辑器的css才能正常工作，或者可以直接导入它，或者使用其他构建系统使用Jodit编辑器软件包提供的css文件添加一个link标记。 import 'jodit/build/jodit.min.css' import Vue from 'vue' import JoditVue from 'jodit-vue' Vue . use ( JoditVue ) 代替使用Vue.use(JoditVue)您可以在本地使用该组件 < template>
富文本编辑器--jodit-vue 插件踩坑之路
qq_40596488的博客
09-10 2343
jsdit富文本编辑器的踩坑之路 总体来说这个富文本编辑器还挺好使用的；但是中文文档不全，使用起来必须看 文档地址：传送门 一 如何使用 npm 安装 npm install jodit CDN使用方法 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.1.39/jodit.min.css"> <script src="//cdnjs.cl...
vue2.x使用jodit富文本编辑器，并配置自定义字体和中文
超小少的博客
03-24 2553
jodit富文本编辑器字体配置、Jodit的使用问题一：不能配置字体解决步骤如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 最新在做邮箱系统时，需要用到富文本编辑器且功能比较齐全的，比如表格的全部功能；筛选了多款编辑器，最终拟定了两种，一个是百度的UEditor，一个是J
vue3 中使用 TinyMCE 富文本编辑器
最新发布
qq_40893035的博客
03-05 886
找到官网，找到下载vue版本的地址上执行下载命令，将官网上的实例代码复制粘贴上去注册账号，获取免费的API-key汉化优化组件行为动作，比如上传图片。
关于富文本编辑器jodit的使用和使用中遇到的问题
服务员的博客
11-12 6763
Jodit v.3使用纯TypeScript编写的优秀开源WYSIWYG编辑器，无需使用其他库,是国外的一个开源富文本编辑器 我打算在项目中集成这个富文本编辑框. 按照官网的教程基本配置成功! //开始使用 通过 bower安装 bower install jodit 通过 npm安装 npm install jodit CDN使用方法 <link rel="styleshee...
一款纯VUE3 开发的富文本编辑器 editor
10-18
这款vue 编辑是由vue3 开发的，不存在第三方引用，拿来即可用不用添加任何外部图片js,组件，且二次开发也方便 版本为vue-property-decorator
Jodit编辑器 v3.24.7
03-19
Jodit编辑器是一款使用纯TypeScript编写的（无需使用其他库），美观实用的所见即所得（WYSIWYG）开源富文本编辑器，支持中文，超强自定义。
jodit编辑器的基本使用
qq_41257074的博客
06-09 658
jodit编辑器的基本使用以及基础配置
vue3使用jodit富文本编辑器
weixin_49295874的博客
12-14 1083
（我是原字体上面更改替换的）
在vite5和vue3开发环境中使用jodit4富文本编辑器，并添加自定义插件和使用highlight.js实现代码块高亮（附其他自定义配置项和全部代码）
超小少的博客
01-17 856
在vite5和vue 3中的开发环境使用jodit 4富文本编辑器，并添加自定义插件和使用highlight.js实现代码块高亮，还有其他配置：标签属性配置（createAttributes: ）、字体、字号、图片上传、中文显示（i18n）等等。附上全部代码
在 Vue 2 中安装和使用 mavon-editor富文本编辑器
jakelihua
06-27 4512
在许多网站和应用程序中，富文本编辑器是一种常见的工具，它使用户能够以直观的方式创建和编辑文本内容。本文将向您介绍如何在 Vue 3 中安装和使用 mavon-editor。
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
Vue3富文本编辑器组件封装
10-25
tinymce自定义样式及汉化配置文件
vue集成百度UEditor富文本编辑器使用教程
10-17
主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-plus虚拟化表格组件el-table-v2渲染自定义组件的其中两种方式(js和jsx)及注意事项
热门推荐
超小少的博客
10-12 2万+
在使用element-plus的虚拟表格化组件el-table-v2渲染数据和组件的方法时，由于官网的使用示例中只有ts或tsx版，文章则是使用js和jsx的示例及一些虚拟化表格组件的注意事项。在设置columns属性时，其中的宽度字段（width）必须设置值（只能是数字类型）且每一列都要设置，不然会出现数据不显示或是只显示一列的情况。 先看效果图（数据是mockjs随机生成的） columns属性中自定义单元格渲染器的字段是cellRenderer，类型为VueComponent/(props: Cell
vant组件ImagePreview动态渲染v-html里的图片不显示bug
超小少的博客
04-13 4179
问题描述： 对元素v-html的内容中图片实现点击放大预览，因为我做的是移动端项目，所以使用的ui框架是vant，用到了图片预览组件ImagePreview， 因为是通过v-html绑定的数据，获取图片的src需要绑定监听事件，ImagePreview有两种使用方法：组件调用和函数调用，起初我使用的是函数调用，组件结构如下： <template> <div class="c...
vue打包部署服务器后前端访问页面出现404
超小少的博客
04-13 3267
最近项目打包部署至服务器后，通过前端访问，页面能进入vue路由写的404页面，但是无法进入其他页面，网上也看过一些文章，说的是需要后端进行相应配置，并开启伪静态，而我们项目的后端并未使用伪静态，然后前端做了修改。 在vue-router路由对象中，路由有两种模式：hash和history，而我一般使用history模式，在history模式下，前端路由须和向后端发起请求的路由一致，如http://...
vue3 使用什么富文本编辑器
07-28
Vue3可以使用许多富文本编辑器，以下是一些常见的选择： 1. CKEditor：这是一个功能丰富且灵活的富文本编辑器，可以与Vue3无缝集成。 2. Quill：这是一个易于使用和可定制的富文本编辑器，也可以与Vue3一起使用。 3. TinyMCE：这是一个强大的富文本编辑器，具有很多可定制的选项，并且可以与Vue3集成。 4. Vue2Editor：这是一个基于Quill的富文本编辑器组件，专门为Vue3设计。 5. Vditor：这是一个轻量级的Markdown编辑器，但也支持富文本编辑，并且与Vue3兼容。 请注意，以上只是一些常见的选择，你还可以根据自己的需求和偏好选择其他富文本编辑器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值