前端杂谈 · Web

Vue后台 TinyMCE 富文本配置工具栏

•̀.̫•́✧ · 1月22日 · 2021年

前言

本篇文章记录下vue-element-admin管理系统,整合TinyMCE 富文本的配置经验。

根据业务需求以及使用频率,需要将段落模块放置到快速工具栏:

Vue后台 TinyMCE 富文本配置工具栏-字节智造

实现效果:

Vue后台 TinyMCE 富文本配置工具栏-字节智造

实现步骤

因为vue-element-admin整合的TinyMCE插件,引入文件部署在云端:

const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'

再不改变TinyMCE版本的情况下,只能使用旧版本的配置了。找到TinyMCE文件目录下的toolbar.js文件:

Vue后台 TinyMCE 富文本配置工具栏-字节智造

在toolbar数组中

const toolbar = [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 

'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'

]

export default toolbar

新增一项:

const toolbar = [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 

'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',

'undo redo styleselect bold italic link image'
]

export default toolbar
'undo redo styleselect bold italic link image'

新增的位置,决定富文本框最终展现的顺序。

比如我在最后新增,则展示在最下方:

Vue后台 TinyMCE 富文本配置工具栏-字节智造

配置工具项

所属插件为核心的项为基本包里自带的功能,直接写在toolbar里就可以,属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。

配置项所属插件描述
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核心插入的集合按钮
hrhr水平线
bullistlists无序列表
numlistlists有序列表
linklink添加和修改链接
unlinklink去除链接格式
openlinklink打开选中链接
imageimage添加和修改图片
charmapcharmap特殊符号
pastetextpaste粘贴纯文本
printprint打印
previewpreview预览
anchoranchor作者
pagebreakpagebreak分页符
spellcheckerspellchecker拼写检查
searchreplacesearchreplace搜索
visualblocksvisualblocks隐藏块级区域开关
visualcharsvisualchars隐藏字符串开关.
codecode代码
helphelp帮助
fullscreenfullscreen全屏
insertdatetimeinsertdatetime插入时间
mediamedia插入/编辑媒体文件
nonbreakingnonbreaking不间断空格
savesave保存(ajax)
cancelsave取消保存
tabletable插入/编辑表格
tabledeletetable删除表格
tablecellpropstable单元格属性
tablemergecellstable合并单元格
tablesplitcellstable拆分单元格
tableinsertrowbeforetable在当前行之前插入一个新行
tableinsertrowaftertable在当前行之后插入一个新行
tabledeleterowtable删除当前行
tablerowpropstable行属性
tablecutrowtable剪切选定行
tablecopyrowtable复制选定行
tablepasterowbeforetable在当前行之前粘贴行
tablepasterowaftertable在当前行之后粘贴行
tableinsertcolbeforetable在当前列之前插入一个列
tableinsertcolaftertable在当前列之后插入一个列.
tabledeletecoltable删除当前列
rotateleftimagetools逆时针旋转当前图像
rotaterightimagetools顺时针旋转当前图像
flipvimagetools垂直翻转当前图像
fliphimagetools水平翻转当前图像
editimageimagetools打开图像编辑对话框
imageoptionsimagetools打开图像配置对话框
fullpagefullpage完整页面的文档属性
ltrdirectionality设置编写方向从左到右
rtldirectionality设置编写方向从右到左
emoticonsemoticons表情
templatetemplate插入模板
forecolortextcolor文本颜色
backcolortextcolor背景颜色
restoredraftrestoredraft恢复到最新的自动保存草稿
insertfilemoxiemanager引入文件
a11ychecka11ychecker检查访问性
toctoc插入目录
quickimageinlite插入本地图像
quicktableinlite插入2X2的表格
quicklinkinlite插入连接

参考

TinyMCE中文官方文档:http://tinymce.ax-z.cn/

vue-element-admin中文官方项目地址: https://panjiachen.github.io/vue-element-admin/#/dashboard

0 条回应