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

目录

组件安装

组件引用

添加模板

初始化编辑器

常用属性配置

扩展插件使用

---

之前分享了一篇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"用来绑定富文本编辑的内容，但是这时我们会发现页面没有显示编辑器，因为我们还没有初始化编辑器。

初始化编辑器

在模板中添加: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引用才能使用，以下是我测试过的插件列表。

核心功能		扩展插件
toolbar	描述	toolbar	plugins	描述
newdocument	创建一个新文档	bullist	lists	项目符号
undo	撤回	numlist	lists	编号列表
redo	恢复	link	link	添加一个连接
visualaid	网格线	image	image	添加图片
cut	剪切	charmap	charmap	特殊符号
copy	复制	pastetext	paste	粘贴为纯文本
paste	粘贴	print	print	打印
selectall	全选	preview	preview	预览
bold	加粗	hr	hr	水平分割线
italic	斜体	anchor	anchor	插入锚点
underline	下划线	pagebreak	pagebreak	分页符
strikethrough	删除线	spellchecker	spellchecker	拼写检查开关
subscript	下标	searchreplace	searchreplace	打开搜索和替换对话框
superscript	上标	visualblocks	visualblocks	显示区块边框
removeformat	清除格式	visualchars	visualchars	显示不可见字符
alignleft	左对齐	code	code	源码预览
aligncenter	居中	fullscreen	fullscreen	全屏
alignright	右对齐	insertdatetime	insertdatetime	插入时间
alignjustify	两边对齐	media	media	插入媒体文件
outdent	减少缩进	nonbreaking	nonbreaking	不间断空格
indent	增加缩进	inserttable	table	插入表格
forecolor	前景色	tableprops	table	配置并插入表格
backcolor	背景色	deletetable	table	删除表格
fontsizeselect	字号大小	cell	table	表格单元配置
formatselect	标题大小	row	table	表格行配置
更多的插件大家可以在项目中的 node_modules/tinymce/plugins 目录中自行查看，测试！		column	table	表格列配置
		restoredraft	autosave	恢复到上次草稿
		fullpage	fullpage	元数据和文档属性
		toc	toc	插入目录
		help	help	帮助菜单

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

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

 欢迎关注本人的公众号：编程手札，文章也会在公众号更新