如何实现tinymce多语言的切换

如何实现tinymce多语言的切换

前言

文档编辑器的引入链接： vue2引入tinymce5
vue3引入tinymce6
学会上面两个才能进行今天的步骤，语言切换

语言包下载

tinymce6的官方语言包地址
tinymce5的可以在官网切换版本就可以
其实跟之前文章里介绍的汉化包的安装过程一样，多语言切换首先就是将你想要的的语言包下载后安装至项目中

项目中安装语言包

首先看你tinymce包安装在哪里，根据我之前的教程，我是安装在public目录下的，那么语言包自然就在/public/tinymce/langs下，如下

引入语言包

也是重复之前文章的内容，在编辑器的init中，写入语言包地址，即可实现语言包的引入

language_url: '/tinymce/langs/zh_Hans.js', // 汉化路径
language: 'zh_Hans',

特别提醒，不要照我的代码抄，我的中文包名字zh_Hans.js是我自己改的，原因是之前版本的中文包名字叫这个，现在的tinymce6的中文包名字叫zh_CN.js
比文件名更重要的是语言包中的变量名，某些版本的包名和变量名是不一样的，这是绝大多数汉化失败的根本原因，你的init中language后的值应该是语言包中的变量名，即下图中的code，而language_url中最后面是你的包名

语言切换

接下来才是这次文章的正经内容，大部分人应该已经会了
实际就是用js（我用的TS请自行当做js观看）代码来控制anguage_url和language两个变量的值，然后主动使tinymce编辑器重新加载一次，即可实现语言切换。

// An highlighted block
<template>
	<el-select v-model="languageValue" placeholder="请选择" size="small">
        <el-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div class="tinymce-editor" :key="refreshKey">
        <Editor v-model="myValue" :init="init" :disabled="disabled" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'

interface InitProps {
  image_advtab: Boolean;
  placeholder: string | null;
  language_url: string | null;
  language: string | null;
  skin_url: string | null;
  height: number;
  content_style: string | null;
  // images_upload_url: '/img/attch/upload', //图片服务器地址，目前报错，待解决
  images_upload_url: string | null;
  // image_advtab: true, // 禁用高级选项卡，其中包括大小调整
  image_resize: false, // 禁用图片大小调整功能

  plugins: string | null;
  toolbar: Array<string>;
  menubar: boolean;
  quickbars_insert_toolbar: boolean;
  quickbars_selection_toolbar: boolean;
  promotion: boolean;
  branding: boolean;
  font_family_formats: string | null;
  save_onsavecallback: Function;
}
tinymce.baseURL = 'tinymce'
const init: InitProps = reactive(
  {
    image_advtab: false,
    placeholder: '在这里输入文字',
    language_url: '/tinymce/langs/zh_Hans.js', // 汉化路径
    language: 'zh_Hans',
    skin_url: '/tinymce/skins/ui/oxide',
    height: window.innerHeight - 50, // 编辑器高度，可以考虑获取窗口高度，以适配不同设备屏幕
    content_style:
      'img {max-width:100%;} html{background-color: #fff; padding: 0 100px}', // 直接自定义可编辑区域的css样式
    // images_upload_url: '/img/attch/upload', //图片服务器地址，目前报错，待解决
    images_upload_url: '/api/file/upload', //图片服务器地址，目前报错，待解决
    // image_advtab: true, // 禁用高级选项卡，其中包括大小调整
    image_resize: false, // 禁用图片大小调整功能
    plugins:
      'accordion advlist anchor autolink  autosave charmap code codesample directionality emoticons fullscreen help image importcss insertdatetime link lists media nonbreaking pagebreak preview quickbars save searchreplace table visualblocks visualchars wordcount kityformula-editor formatpainter comment toc',
    toolbar: [
      // 'searchreplace bold italic underline strikethrough fontselect fontsizeselect  alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
      // 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
      // '  save undo redo accordion advlist anchor autolink autosave charmap code codesample directionality emoticons fullscreen help image importcss insertdatetime link lists media nonbreaking pagebreak preview quickbars searchreplace table template visualblocks visualchars wordcount kityformula-editor formatpainter',
      'save undo redo blocks bold italic underline strikethrough subscript superscript backcolor fontfamily fontsize forecolor removeformat bullist numlist outdent indent alignleft aligncenter alignright image link pagebreak code table searchreplace preview print wordcount kityformula-editor formatpainter',
      'media anchor emoticons charmap codesample ltr rtl hr insertdatetime template blockquote help comment toc '
      // 缺少目录
    ],
    menubar: false, //菜单栏，true为显示，false可隐藏
    quickbars_insert_toolbar: false, //禁用每行开头处自动弹出的工具栏
    quickbars_selection_toolbar: false, // 禁用选中文本时的工具栏
    promotion: false, //去除右上角的“Upgrade”的促销按钮
    branding: false,
    font_family_formats:
      "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
  }
)

const options = ref([
  {
    value: 'zh_Hans',
    label: '中文简体',
  },
  {
    value: '',
    label: '英文',
  },
  {
    value: 'ja',
    label: '日文',
  },
  {
    value: 'zh_TW',
    label: '中文繁体',
  },
  {
    value: 'de',
    label: '德语'
  },
  {
    value: 'ko_KR',
    label: '韩语',
  },
  {
    value: 'ar',
    label: '阿拉伯语',
  },
  {
    value: 'bg_BG',
    label: '保加利亚语'
  },
  {
    value: 'ca',
    label: '加泰罗尼亚语'
  }
])
const languageValue = ref('zh_Hans')
const changeLanguage = () => {
  // 切换编辑器语言
  const langs = languageValue.value
  if (langs) {
    init.language_url = `/tinymce/langs/${langs}.js`
    init.language = langs
  } else {
    // langs为空时显示英文
    init.language_url = null
    init.language = null
  }
  refreshKey.value++
}
watch(() => languageValue.value,
  (value) => {
    changeLanguage()
 })
</script>

后面方法中还有比较重要的一步，就是重新加载编辑器，在上一篇文章有介绍，其实就是主动刷新子组件的方法，详细看
vue如何重新渲染子组件
在这里tinymce有一个小坑，不能将key加在编辑器组件上，会失效

//这样key是不生效的
<Editor :key="refreshKey" v-model="myValue" :init="init" :disabled="disabled" />

这是tinymce的问题，要解决只要在它的父元素上绑定key就好了
然后监听选中的语言值，当发生变化时，改变init.language_url和init.language

效果图