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自定义调整大小'
};