vue实战025:配置TinyMCE富文本编辑器

科技 06-11 来源：编程手札

之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用，有网友说TinyMCE更好用，所以今天来分享下Vue中使用TinyMCE，TinyMCE也是一个轻量级的可视化在线 HTML 编辑器，由JavaScript写成，基本功能齐全而且配置灵活简单，容易上手，加载速度非常快，我新增了一个页面来测试TinyMCE富文本功能。

以下是基于Vue3.5.5搭建的项目，TinyMCE版本为5.0.7

组件安装

这里我们需要安装tinymce和tinymce-vue（tinymce 官方为 vue 项目提供的一个组件），直接npm安装即可：

npm install tinymce -S 
npm install @tinymce/tinymce-vue -S
//对应版本
"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.7",

在public目录下新建tinymce，在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面，如果你下载了汉化包也可以解压到该目录，tinymce提供了很多的语言包，这里我们下载中文语言包即可。创建一个新的vue文件，然后配置好路由我们就可以开始使用TinyMCE编辑器了。

组件引用

在页面中引入基本文件，tinymce-vue是一个组件，需要在 components 中注册才能使用，所以别忘了注册Editor。

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
 
components:{
 Editor,
 },

添加模板

将注册的组件Editor引入template中，v-model="tinymceHtml"用来绑定富文本编辑的内容，但是这时我们会发现页面没有显示编辑器，因为我们还没有初始化编辑器。

<template>
 <div class="tinymce">
 <Editor id="tinymce" v-model="tinymceHtml"></Editor> 
 </div>
</template>

初始化编辑器

在模板中添加:init="init"，然后给init定义一个skin_url来指定编辑器的主题样式，这里我指定的是/tinymce/skins/ui/oxide（白色），你也可以选择/tinymce/skins/ui/oxide-dark（黑色）,到目前为止我们就已经可以在前端正常的显示TinyMCE编辑器了（也就是本文第一张图所显示的样子了）。

 data（）{
 return{
 init:{
 skin_url: '/tinymce/skins/ui/oxide',
 },
 }
}
mounted(){
 tinymce.init({})
 }

常用属性配置

init中除了配置skin_url属性，我们还可以为TinyMCE编辑器配置更多的参数，下面是一些常用的配置属性仅供参考（看自己需求）：

init:{
 selector: '#tinymce',//DOM选择器
 language_url:'/tinymce/langs/zh_CN.js', //导入语言文件
 language: "zh_CN",//语言设置
 skin_url: '/tinymce/skins/ui/oxide',//主题样式
 height:500, //高度
 menubar: false,// 隐藏最上方menu菜单
 toolbar: true,//false禁用工具栏（隐藏工具栏）
 browser_spellcheck: true, // 拼写检查
 branding: false, // 去水印
 statusbar: false, // 隐藏编辑器底部的状态栏
 elementpath: false, //禁用下角的当前标签路径
 paste_data_images: true, // 允许粘贴图像
},

扩展插件使用

除了以上的基本功能，TinyMCE编辑器还支持插件扩展，tinymce 通过添加插件plugins的方式来添加功能，在添加之前我们需要先来引入相应的插件，在node_modules/tinymce/plugins目录中我们可以看到TinyMCE编辑器支持很多插件，下面是一些常用插件。

import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu' //右键菜单插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/colorpicker' //选择颜色插件
import 'tinymce/plugins/textcolor' //文本颜色插件

引入插件之后我们就可以在init中重新初始化下对应的toolbar（工具栏图标）和plugins（对应的插件组件）属性，下面是TinyMCE的功能表，所属插件为核心功能时只要将配置项引入到toolbar中即可直接使用，扩展插件的则需要在plugins中引入对应的插件再在toolbar引用才能使用，以下是我测试过的插件列表。

下面是以上插件显示的效果，我们可以看到TinyMCE为我们提供很多编辑器功能，可以说该有的基本上都有了（个人觉得TinyMCE的确比Vue-Quill-Editor强大多了，我最喜欢图片能直接复制粘贴到编辑器了），至于你用到哪些就看你项目的需求了。

这里我把完整的代码贴出来，有兴趣的可以自行配置适合自己的TinyMCE编辑器，上面说到的插件这里都用到了也引进来了，toolbar分了两行，一行是核心插件（不需要引入组件和添加plugins），另一行则需要先引入组件再添加plugins方能使用哦。

<template>
 <div class="tinymce">
 <Editor id="tinymce" v-model="tinymceHtml" :init="init"></Editor> 
 </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
//--------------------插入引入--------------------
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu' //右键菜单插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/colorpicker' //选择颜色插件
import 'tinymce/plugins/textcolor' //文本颜色插件
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help' 
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/toc'
export default {
 data(){
 return{
 init:{
 selector: 'Editor',//选择HTML元素
 language_url:'/tinymce/langs/zh_CN.js', //导入语言文件
 language: "zh_CN",//语言设置
 //disabled:true, //禁用
 skin_url: '/tinymce/skins/ui/oxide',//主题样式
 height:500, //高度
 menubar: false,// 隐藏最上方menu菜单
 toolbar: true,//false禁用工具栏（隐藏工具栏）
 browser_spellcheck: true, // 拼写检查
 branding: false, // 去水印
 statusbar: false, // 隐藏编辑器底部的状态栏
 elementpath: false, //禁用下角的当前标签路径
 paste_data_images: true, // 允许粘贴图像
 plugins: 
 'lists image media table wordcount code fullscreen help toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor' ,
 toolbar:[
 'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | removeformat ',
 'code bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap pastetext print preview hr',
 ]
 },
 tinymceHtml:'', 
 }
 },
 components:{
 Editor,
 },
 mounted(){
 tinymce.init({})
 },
}
</script>
<style scoped>
 
</style>