本人在使用富文本，需要国际化语言切换。找了一圈，就这个富文本能够支持。
本文仅限于使用vue2
代码讲解
话不多说，不多逼逼，上代码：
<template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:default-config="toolbarConfig"
:mode="mode"
/>
<Editor
v-model="html"
style="height: 500px; overflow-y: hidden"
:default-config="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
/>
</div>
</template>
<script>
// 引入编辑器
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { i18nAddResources, i18nChangeLanguage } from '@wangeditor/editor'
import i18n from './i18n'
if (window.localStorage.getItem('lang') !== 'zh') {
i18nChangeLanguage('zh-CN')
} else {
i18nAddResources('es', {
...i18n
})
i18nChangeLanguage('es')
}
export default {
components: { Editor, Toolbar },
props: {
content: {
type: String,
default: null,
},
},
data() {
return {
editor: null,
html: '',
toolbarConfig: {},
mode: 'default', // or 'simple'
}
},
watch: {
content(value) {
this.html = this.content
},
},
mounted() {},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
onChange(editor) {
this.$emit('editorConfigChange', editor.getHtml())
},
},
}
</script>
<style lang="scss" scoped>
#editor-container {
height: 320px;
border: 1px solid #ccc;
}
</style>
一个老手开发就不需要垃圾的代码解释了，这些都能去官网找：www.wangeditor.com/v5/for-fram…
直接讲重点了。 关于国际化配置，最重点的在这几步：
...
import { i18nAddResources, i18nChangeLanguage } from '@wangeditor/editor'
import i18n from './i18n'
if (window.localStorage.getItem('lang') !== 'zh') {
i18nChangeLanguage('zh-CN')
} else {
i18nAddResources('es', {
...i18n
})
i18nChangeLanguage('es')
}
...
zh-CN：中文
es：西班牙语
有些人要打我了，i18n你特么没给啊。别急在下面。
export default {
listModule: {
unOrderedList: "无序列表",
orderedList: "有序列表",
},
common: {
ok: '确定',
delete: '删除',
enter: '回车',
},
blockQuote: {
title: '引用',
},
codeBlock: {
title: '代码块',
},
color: {
color: '文字颜色',
bgColor: '背景色',
default: '默认颜色',
clear: '清除背景色',
},
divider: {
title: '分割线',
},
emotion: {
title: '表情',
},
fontSize: {
title: '字号',
default: '默认字号',
},
fontFamily: {
title: '字体',
default: '默认字体',
},
fullScreen: {
title: '全屏',
},
header: {
title: '标题',
text: '正文',
},
uploadImgModule: {
uploadImage: "上传图片",
uploadError: '{{fileName}} 上传出错',
},
image: {
netImage: '网络图片',
delete: '删除图片',
edit: '编辑图片',
viewLink: '查看链接',
src: '图片地址',
desc: '图片描述',
link: '图片链接',
},
indent: {
decrease: '减少缩进',
increase: '增加缩进',
},
justify: {
left: '左对齐',
right: '右对齐',
center: '居中对齐',
justify: '两端对齐',
},
lineHeight: {
title: '行高',
default: '默认行高',
},
link: {
insert: '插入链接',
text: '链接文本',
url: '链接地址',
unLink: '取消链接',
edit: '修改链接',
view: '查看链接',
},
videoModule: {
delete: '删除视频',
uploadVideo: '上传视频',
insertVideo: '插入视频',
videoSrc: '视频地址',
insertPlaceHolder: '视频文件 url 或第三方 <iframe>',
ok: '确定',
editSize: '修改尺寸',
width: '宽度',
height: '高度',
},
textStyle: {
bold: '粗体',
clear: '清除格式',
code: '行内代码',
italic: '斜体',
sub: '下标',
sup: '上标',
through: '删除线',
underline: '下划线',
},
tableModule: {
deleteCol: '删除列',
deleteRow: '删除行',
deleteTable: '删除表格',
widthAuto: '宽度自适应',
insertCol: '插入列',
insertRow: '插入行',
insertTable: '插入表格',
header: '表头',
},
undo: {
undo: '撤销',
redo: '重做',
},
todo: {
todo: '待办',
},
};
有人又要打我了，你他么不给我翻译啊，我要怼回去，找你们产品经理去。
这里本人只是附上了所有关于wangeditor国际化语言配置的文档。
托槽：官网找累死你找不到
总结
- 国际化开发
- 富文本使用
- 配置语言文档
