Vue集成tinymce富文本编辑器并实现本地化指南（2019.11.21最新）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 tinymce是一款综合口碑特别好、功能异常强大的富文本编辑器，在某些网站，甚至享有“宇宙最强富文本编辑器”的称号。那么，在Vue项目中如何集成呢？这并不困难，只需要参照官方教程即可。难点在于如何将默认的英文本地化为中文。

 本人参考了众多网络资料进行本地化，竟发现没有一篇文章能够完全走通，并且各个教程显得极其繁琐。因此重新参考官方教程，反复实践，终究得以攻克。最终的方案较为简洁，基于官方包较为可靠。现将配置的细节、一些关键的要点分享如下。

 本文使用的版本：tinymce-vue 3.0.1。该包是tinymce官方的开源项目，并在官网文档中提供了说明，因此完全是值得信赖的。

 与网络上的众多教程相比，本文的方案只需要安装tinymce-vue即可，无需额外安装tinymce。

一、安装tinymce-vue

npm install @tinymce/tinymce-vue

二、引入tinymce-vue并注册为组件

import Editor from '@tinymce/tinymce-vue';
export default {
  name: 'HelloWorld',
  components: {
    'tinymce-editor': Editor
  },
}

三、使用组件

html"><tinymce-editor api-key="API_KEY" 
:init="{plugins: 'wordcount'}"></tinymce-editor>

API_KEY是你向tinymce官网注册账号得到的，免费即可获得，若没有传入有效的api-key属性，富文本编辑器也能使用，但会有恼人的提示：

The API key you have entered is invalid. Please review your API key here.

四、下载中文语言包

经过以上三步，已经可以使用了，但菜单是英文的，因此需要本地化为中文。进入官网下载中文语言包，语言包地址。

五、导入中文语言包

在项目的public目录下新建tinymce目录，并将下载好的中文语言包中的zh_CN.js文件拷贝到tinymce目录中。

这是最为关键的一步，需注意的是：

  • 必须在public目录下创建文件夹来存放语言包。原因是语言包必须能通过绝对路径访问，而对于我们的vue项目而言，绝对路径是public目录。

现在传入tinymce编辑器的初始化参数，在其中正确设置语言参数，如下：

    <tinymce-editor api-key="API_KEY" 
    :init="editorConfig"></tinymce-editor>

import Editor from '@tinymce/tinymce-vue';
export default {
  name: 'HelloWorld',
  components: {
    'tinymce-editor': Editor
  },
  data(){
    return {
      editorConfig:{
        language: 'zh_CN',
        language_url: '/tinymce/zh_CN.js'
      }
     }
  }
}

其中language_url必须传入绝对路径。

六、继续汉化

即便我们已经有了中文语言包，由于tinymce的插件众多，情况千差万别，难免有汉化不全的情况。这时，我们只需要进入zh_CN.js文件中，添加需要汉化的英文即可，例如：

{ "Insert iframe": "插入iframe" }

  • 虽然我们看到原本的语言包中的中文采用的是unicode编码，但我们并不是只能采用unicode编码，直接输入汉字也是可以的。

本文完~。

以上是 Vue集成tinymce富文本编辑器并实现本地化指南（2019.11.21最新） 的全部内容， 来源链接： utcz.com/z/376088.html

回到顶部