【vue富文本插件】tinymce 安装使用及汉化注意项

前言

前端开发过程中，无论是移动设备还是PC设备，经常会用到富文本编辑器。一般情况下，我们不会自己造轮子（太耽误时间，而且有大量成熟的轮子免费且好用），而是使用一些前人封装好的插件。常见的富文本编辑器插件如：wangEditor、UEditor、Kindeditor、Simditor、CKEditor 等等。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

而我们今天要说的，TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器。插件丰富，可扩展性强，功能配置灵活简单，加载速度快，界面好看，符合现代审美，可支持多种语言：（官网说的这些优势，当然大家可以在使用过过程中进行对比）：

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

你可以通过隐藏工具栏的方式，让富文本编辑器无缝融合到页面中。也可以开启全部功能，呈现经典的类 word 模式，界面如下：

你可以更改图表颜色，更加醒目的展示某个功能：

官网

中文文档

一、tinymce 下载安装

1.1 npm 安装

• 环境

  • “node”: v14.18.1
  • “vue”: “^2.6.10”
  • “tinymce”: “^6.7.0”
  • “@tinymce/tinymce-vue”: “^3.2.8”

• 安装相关插件

  npm install tinymce -S
  npm install @tinymce/tinymce-vue -S
  

  如果因vue版本过低与最新tinymce插件不兼容，可通过@指定tinymce版本号

  npm install tinymce@5.1.0 -S
  npm install @tinymce/tinymce-vue@3.0.1 -S
  

  tinymce-vue是tinymce官方提供的一个vue组件，可以直接拿过来使用，但是必须要到官网注册获取api-key，否则只有一段时间的试用期。
  

1.2 提供 CDN 版本免费下载

社区版
开发版

二者的区别是开发版包含未被压缩过的源码，方便开发者学习分析，魔改部分功能。开发版中包含社区版。

其它下载：

• Github
• Gitee码云

CDN：

• 国内：BootCDN
• 国外：tiny官网

二、tinymce 本地化

插件安装后可以直接使用，但是由于众所周知的国内网络环境，这个国外插件时不时的会加载失败，从而页面编辑器部分一片空白（这也是目前国内用户的短板限制），所以我们需要将它本地化，以提高这种不可控制的用户功能体验。

安装完成后，在 node_modules 中找到 tinymce 文件夹，并将 tinymce 复制到 public 文件夹下或者其他能直接访问到的路径，本文将 tinymce 文件放到了 public 文件夹下。

• tinymce 目录结构如下图：
  
• 复制后的文件结构如下图所示：
  

三、编写富文本组件

在components路径下新建myEditor.vue文件，打开编写如下代码：

1. 引入插件

   import Editor from '@tinymce/tinymce-vue'
   

2. 注册组件

   components: {
       editor: Editor
   },
   

3. 在模板中使用组件

   <editor
       api-key="你的api-key，需要自己去官网注册获取幺！"
       v-model="form.content"
       :init="init"
    />
   </a-form-model-item>
   

4. init 相关配置信息

   data() {
   	return {
   		init: {
   				height: 500,
                   menubar: true,
                   plugins: [
                     'advlist autolink lists link image charmap print preview anchor',
                     'searchreplace visualblocks code fullscreen',
                     'insertdatetime media table paste code help wordcount'
                   ],
                   toolbar:
                     'undo redo | formatselect | bold italic backcolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help',
                   menu: {
                     file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
                     edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
                     view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
                     insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
                     format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
                     tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
                     table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
                     help: { title: 'Help', items: 'help' }
                   },
                   language: 'zh-CH'
   		}
   	}
   }
   

四、在其他 .vue 组件中引入上面编写的 myEditor 组件

<template>
	<myEditor ref="myEditor"></myEditor>
	</template>
	<script>
	import myEditor from '../../components/myEditor.vue';
	export default {
	    name: 'useEditor',
	    components: {
	      myEditor,
	    },
	}
</script>

页面展示效果：

五、相关问题

5.1 汉化

不难发现，上面工具栏是英文的，所以需要汉化。
如果需要汉化显示中文，需要引入中文包，中文包下载地址：Language Packages | Trusted Rich Text Editor | TinyMCE

找到对应的中文包，点击 Download 下载并解压，获取 langs 文件包中的 zh-Hans.js 文件，复制到 public/tinymce/langs 目录下：

修改 三-4 中的 init 配置：

init:{
	...
	language_url: '/tinymce/langs/zh-Hans.js', // 中文包的存放路径
    language: 'zh-Hans'
}

5.2 富文本不显示或者黄色文本提示

需要在 public/index.html 中引入 tinymce.min.js 文件，如下：

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>

这样就显示正常了！！！

附：引入第三方拓展啊插件

有些插件并不是第三方提供的，而是别人开源的，这时候我们要是使用的话就要把他们引入进来。
在 public/tinymce/plugins 目录下，把下载的插件解压缩放进去，然后引用即可