vue3使用jodit富文本编辑器

1.jodit安装

npm install jodit -S //npm安装

2.main.js引入Jodit

import JoditEditor from "/@/components/JoditEditor.vue";
app.component('JoditEditor', JoditEditor);

3.JoditEditor.vue组件

<template>
  <textarea></textarea>
</template>
<script>
import "jodit/build/jodit.min.css";
import { Jodit } from "jodit";
export default {
  name: "JoditEditor",
  props: {
    value: { type: String, default: "" },
    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>

4.页面使用

<jodit-editor :value="info" :config="config" @input="updateInfo($event)"/>

 config: {
        //更多配置项请参考jodit官网
        zIndex: 3000,
        language: "zh_cn",
        width: 500,
        height: 500,
        minHeight: 500,
        toolbarStickyOffset: 0,
        saveModeInCookie: false,
}
 const updateInfo = (res)=>{
      state.info = res;
};

5.更改语言为中文

\node_modules\jodit\src\plugins\font.ts目录下面更改如下：
（我是原字体上面更改替换的）

node_modules\jodit\src\langs\zh_cn.js目录下面更改如下：

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Released under MIT see LICENSE.txt in the project root for license information.
 * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

module.exports = {
	'Type something': '输入一些内容',
	Advanced: '高级',
	'About Jodit': '关于Jodit',
	'Jodit Editor': 'Jodit编辑器',
	'Free Non-commercial Version': '免费非商业版',
	"Jodit User's Guide": '开发者指南',
	'contains detailed help for using': '使用帮助',
	'For information about the license, please go to our website:':
		'有关许可证的信息，请访问我们的网站：',
	'Buy full version': '购买完整版本',
	'Copyright © XDSoft.net - Chupurnov Valeriy. All rights reserved.':
		'Copyright © XDSoft.net - Chupurnov Valeriy. 版权所有',
	Anchor: '锚点',
	'Open in new tab': '在新窗口打开',
	'Open in fullsize': '全屏编辑',
	'Clear Formatting': '清除样式',
	'Fill color or set the text color': '颜色',
	Redo: '重做',
	Undo: '撤销',
	Bold: '粗体',
	Italic: '斜体',
	'Insert Unordered List': '符号列表',
	'Insert Ordered List': '编号',
	'Align Center': '居中',
	'Align Justify': '对齐文本',
	'Align Left': '左对齐',
	'Align Right': '右对齐',
	'Insert Horizontal Line': '分割线',
	'Insert Image': '图片',
	'Insert file': '文件',
	'Insert youtube/vimeo video': '视频',
	'Insert link': '链接',
	'Font size': '字号',
	'Font family': '字体',
	'Insert format block': '格式块',
	Normal: '默认',
	'Heading 1': '标题1',
	'Heading 2': '标题2',
	'Heading 3': '标题3',
	'Heading 4': '标题4',
	Quote: '引用',
	Code: '代码',
	Insert: '插入',
	'Insert table': '表格',
	'Decrease Indent': '减少缩进',
	'Increase Indent': '增加缩进',
	'Select Special Character': '选择特殊符号',
	'Insert Special Character': '特殊符号',
	'Paint format': '格式复制',
	'Change mode': '改变模式',
	Margins: '外边距',
	top: '上',
	right: '右',
	bottom: '下',
	left: '左',
	Styles: '样式',
	Classes: '类别',
	Align: '对齐方式',
	Right: '居右',
	Center: '居中',
	Left: '居左',
	'--Not Set--': '无',
	Src: 'Src',
	Title: '标题',
	Alternative: '替换',
	Link: '链接',
	'Open link in new tab': '在新窗口打开链接',
	Image: '图片',
	file: '文件',
	Advansed: '高级',
	'Image properties': '图片属性',
	Cancel: '取消',
	Ok: '确定',
	'Your code is similar to HTML. Keep as HTML?':
		'你粘贴的文本是一段html代码，是否保留源格式',
	'Paste as HTML': 'html粘贴',
	Keep: '保留源格式',
	Clean: '匹配目标格式',
	'Insert as Text': '把html代码视为普通文本',
	'Word Paste Detected': '文本粘贴',
	'The pasted content is coming from a Microsoft Word/Excel document. Do you want to keep the format or clean it up?':
		'正在粘贴 Word/Excel 的文本，是否保留源格式？',
	'Insert only Text': '只保留文本',
	'File Browser': '文件管理',
	'Error on load list': '加载list错误',
	'Error on load folders': '加载folders错误',
	'Are you sure?': '你确定吗？',
	'Enter Directory name': '输入路径',
	'Create directory': '创建路径',
	'type name': '类型名称',
	'Drop image': '拖动图片到此',
	'Drop file': '拖动文件到此',
	'or click': '或点击',
	'Alternative text': '替换文本',
	Browse: '浏览',
	Upload: '上传',
	Background: '背景色',
	Text: '文字',
	Top: '顶部',
	Middle: '中间',
	Bottom: '底部',
	'Insert column before': '在之前插入列',
	'Insert column after': '在之后插入列',
	'Insert row above': '在之前插入行',
	'Insert row below': '在之后插入行',
	'Delete table': '删除表格',
	'Delete row': '删除行',
	'Delete column': '删除列',
	'Empty cell': '清除内容',
	'Chars: %d': '字符数: %d',
	'Words: %d': '单词数: %d',
	'Strike through': '删除线',
	Underline: '下划线',
	superscript: '上标',
	subscript: '下标',
	'Cut selection': '剪切',
	'Select all': '全选',
	Break: '终止',
	'Search for': '查找',	
	'Replace with': '替换为',
	Replace: '替换',
	Edit: '编辑',
	Paste: '粘贴',
	'Choose Content to Paste': '选择内容并粘贴',
	All: '全部',
	source: '源码',
	bold: '粗体',
	italic: '斜体',
	brush: '颜色',
	link: '链接',
	undo: '撤销',
	redo: '重做',
	table: '表格',
	image: '图片',
	eraser: '橡皮擦',
	paragraph: '段落',
	fontsize: '字号',
	video: '视频',
	font: '字体',
	about: '关于',
	print: '打印',
	underline: '下划线',
	strikethrough: '上出现',
	indent: '增加缩进',
	outdent: '减少缩进',
	fullsize: '全屏',
	shrink: '收缩',
	hr: '分割线',
	ul: '无序列表',
	ol: '顺序列表',
	cut: '剪切',
	selectall: '全选',
	'Open link': '打开链接',
	'Edit link': '编辑链接',
	'No follow': '不跟随',
	Unlink: '取消链接',
	Eye: '预览',
	'URL': '地址',
	Reset: '重置',
	Save: '保存',
	'Save as ...': '保存为',
	Resize: '调整大小',
	Crop: '剪切',
	Width: '宽',
	Height: '高',
	'Keep Aspect Ratio': '保持长宽比',
	Yes: '是',
	No: '不',
	Remove: '移除',
	Select: '选择',
	'Select %s': '选择: %s',
	Update: '更新',
	'Vertical align': '垂直对齐',
	Merge: '合并',
	'Add column': '添加列',
	'Add row': '添加行',
	Border: '边框',
	'Embed code': '嵌入代码',
	Delete: '删除',
	'Horizontal align': '水平对齐',
	Filter: '筛选',
	'Sort by changed': '修改时间排序',
	'Sort by name': '名称排序',
	'Sort by size': '大小排序',
	'Add folder': '新建文件夹',
	Split: '拆分',
	'Split vertical': '垂直拆分',
	'Split horizontal': '水平拆分',
	'You can only edit your own images. Download this image on the host?':
		'你只能编辑你自己的图片。Download this image on the host?',
	'The image has been successfully uploaded to the host!': '图片上传成功',
	palette: '调色板',
	pencil: '铅笔',
	'There are no files': '此目录中沒有文件。',
	Rename: '重命名',
	'Enter new name': '输入新名称',
	preview: '预览',
	download: '下载',
	'Paste from clipboard': '粘贴从剪贴板',
	"Your browser doesn't support direct access to the clipboard.":
		'你浏览器不支持直接访问的剪贴板。',
	'Copy selection': '复制选中内容',
	copy: '复制',
	'Border radius': '边界半径',
	'Show all': '显示所有',
	Apply: '应用',
	'Please fill out this field': '请填写这个字段',
	'Please enter a web address': '请输入一个网址',
	Default: '默认',
	Circle: '圆圈',
	Dot: '点',
	Quadrate: '方形',
	Find: '搜索',
	'Find Previous': '查找上一个',
	'Find Next': '查找下一个',
	'Insert className': '插入班级名称',
	'Press Alt for custom resizing': '按Alt自定义调整大小'
};

6.打包后生效