富文本编辑器TinyMCE | tinymce在Vue中的使用

一、说明

    tinymce 官方为 vue 项目提供了一个组件 tinymce-vue，但是需要购买 tinymce 的服务。所以只能自己配置

二、使用步骤

    1、下载组件

npm install tinymce -S

    2、提取文件

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 arc/assets 目录下

tinymce 默认是英文界面，所以还需要下载一个中文语言包，下图中的zh_CN.js文件：https://www.tiny.cloud/get-tiny/language-packages/

这里为了结构清晰，将文件放在新建目录 Rich_text中

目录结构：

        

    3、在man.js中进行配置

import '@/assets/Rich_text/skins/ui/oxide/skin.min.css'; //富文本样式
import tinymce from 'tinymce/tinymce'; //配置富文本
import 'tinymce/themes/silver/theme.min.js' //引入富文本的主要脚本
import Editor from '@tinymce/tinymce-vue'; //引用富文本组件
import lang from '@/assets/Rich_text/zh_CN.js'; //引用中文语言

tinymce.addI18n('zh_CN', lang); //注册中文语言，这里配置不起作用后面还可以配置
Vue.component('editor', Editor); //注册全局组件

    4、在组件中使用，在这里先讲个简单使用

三、配置代码

    1、结构

 

 

    2、实例

    说明：有些功能是核心功能（下面表格中所属插件为核心的），是初始自带的功能。而所属插件项不是核心的，则需要引入插件

四、配置项

1、菜单栏可选项

配置项	所属插件	描述
newdocument	核心	创建一个新文档
undo	核心	撤回
redo	核心	恢复
visualaid	核心	网格线
cut	核心	剪切
copy	核心	复制
paste	核心	粘贴
selectall	核心	全选
bold	核心	加粗
italic	核心	斜体
underline	核心	下划线
strikethrough	核心	删除线
subscript	核心	下标
superscript	核心	上标
removeformat	核心	清除格式
codeformat	核心	内联形式插入代码.
blockformats	核心	块形式插入代码.
align	核心	更改对齐方式.
formats	核心	所有可用格式.
link	link	添加一个连接.
openlink	link	添加一个在新标签页中打开的连接.
image	image	添加图片.
charmap	charmap	开启字符映射表.
pastetext	paste	粘贴为纯文本.
print	print	打印.
preview	preview	预览
hr	hr	横线
anchor	anchor	插入锚点.
pagebreak	pagebreak	分页符
spellchecker	spellchecker	拼写检查开关.
searchreplace	searchreplace	打开搜索和替换对话框
visualblocks	visualblocks	隐藏块级区域开关.
visualchars	visualchars	隐藏字符串开关.
code	code	源码预览.
fullscreen	fullscreen	全屏
insertdatetime	insertdatetime	插入时间.
media	media	插入媒体文件
nonbreaking	nonbreaking	插入一个nonbreaking
inserttable	table	插入表格
tableprops	table	配置并插入表格.
deletetable	table	删除表格.
cell	table	表格单元配置
row	table	表格行配置
column	table	表格列配置
restoredraft	autosave	恢复到上次自动保存的数据
fullpage	fullpage	查看完整的文档属性
toc	toc	插入目录
help	help	帮助菜单

 

 

2、工具栏可选项

配置项	所属插件	描述
newdocument	核心	创建新文档
bold	核心	加粗
italic	核心	斜体
underline	核心	下划线
strikethrough	核心	删除线
alignleft	核心	居左
aligncenter	核心	居中
alignright	核心	居右
alignjustify	核心	两端对齐
alignnone	核心	清除
styleselect	核心	格式选择下拉框(缩进、行高)
formatselect	核心	段落选择下拉框(段落、标题)
fontselect	核心	字体选择下拉框
fontsizeselect	核心	字号选择下拉框
cut	核心	剪切
copy	核心	复制
paste	核心	粘贴
outdent	核心	减少缩进
indent	核心	增加缩进
blockquote	核心	引用
undo	核心	撤消
redo	核心	恢复
removeformat	核心	清除格式
subscript	核心	下标
superscript	核心	上标
visualaid	核心	网格线
insert	核心	插入的集合按钮
hr	hr	水平线
bullist	lists	无序列表
numlist	lists	有序列表
link	link	添加和修改链接
unlink	link	去除链接格式
openlink	link	打开选中链接
image	image	添加和修改图片
charmap	charmap	特殊符号
pastetext	paste	粘贴纯文本
print	print	打印
preview	preview	预览
anchor	anchor	作者
pagebreak	pagebreak	分页符
spellchecker	spellchecker	拼写检查
searchreplace	searchreplace	搜索
visualblocks	visualblocks	隐藏块级区域开关
visualchars	visualchars	隐藏字符串开关.
code	code	代码
help	help	帮助
fullscreen	fullscreen	全屏
insertdatetime	insertdatetime	插入时间
media	media	插入/编辑媒体文件
nonbreaking	nonbreaking	不间断空格
save	save	保存(ajax)
cancel	save	取消保存
table	table	插入/编辑表格
tabledelete	table	删除表格
tablecellprops	table	单元格属性
tablemergecells	table	合并单元格
tablesplitcells	table	拆分单元格
tableinsertrowbefore	table	在当前行之前插入一个新行
tableinsertrowafter	table	在当前行之后插入一个新行
tabledeleterow	table	删除当前行
tablerowprops	table	行属性
tablecutrow	table	剪切选定行
tablecopyrow	table	复制选定行
tablepasterowbefore	table	在当前行之前粘贴行
tablepasterowafter	table	在当前行之后粘贴行
tableinsertcolbefore	table	在当前列之前插入一个列
tableinsertcolafter	table	在当前列之后插入一个列.
tabledeletecol	table	删除当前列
rotateleft	imagetools	逆时针旋转当前图像
rotateright	imagetools	顺时针旋转当前图像
flipv	imagetools	垂直翻转当前图像
fliph	imagetools	水平翻转当前图像
editimage	imagetools	打开图像编辑对话框
imageoptions	imagetools	打开图像配置对话框
fullpage	fullpage	完整页面的文档属性
ltr	directionality	设置编写方向从左到右
rtl	directionality	设置编写方向从右到左
emoticons	emoticons	表情
template	template	插入模板
forecolor	textcolor	文本颜色
backcolor	textcolor	背景颜色
restoredraft	restoredraft	恢复到最新的自动保存草稿
insertfile	moxiemanager	引入文件
a11ycheck	a11ychecker	检查访问性
toc	toc	插入目录
quickimage	inlite	插入本地图像
quicktable	inlite	插入2X2的表格
quicklink	inlite	插入连接