tinymce 5更新后,如何使用tinymce-vue
Posted dekevin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tinymce 5更新后,如何使用tinymce-vue相关的知识,希望对你有一定的参考价值。
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器
但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些:
UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲
bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery...
kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了
wangEditor:轻量、简洁、易用,但是升级到 3.x 之后,不便于定制化开发。不过作者很勤奋,广义上和我是一家人,打个call
quill:本身功能不多,不过可以自行扩展,api 也很好懂,如果能看懂英文的话...
summernote:没深入研究,UI挺漂亮,也是一款小而美的编辑器,可是我需要大的
在有这么参考的情况下,我最终还是选择了 tinymce 这个不搭梯子连官网都打不开的编辑器(简直是自讨苦吃),主要因为两点:
1. GitHub 上星星很多,功能也齐全;
2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器;
3. 不需要找后端人员扫码改接口,前后端分离;
4. 说好的两点呢!
项目使用vue-cli 3.x版本,tinymce5
1. 安装及引用
注:只安装tinymce-vue不可以,还需安装tinymce,否则会报错
npm install tinymce
npm install @tinymce/tinymce-vue
import tinymce from ‘tinymce/tinymce‘
import Editor from ‘@tinymce/tinymce-vue‘
2. 初始化编辑器(记录出现的问题和解决方案)
-
按示例初始化发现编辑器不显示,报“
theme.js:1 Uncaught SyntaxError: Unexpected token <
”这个错。解决方案:手动引入tinymce主题,在init({})方法里加
theme: ‘silver‘,
没用。import ‘tinymce/themes/silver‘
-
不报错了但是编辑器还是不显示,继续研究,发现还需要定义皮肤,在init({})里加
skin: "oxide"
没用。解决方案:先在public目录下新建一个文件夹命名为tinymce,然后在node_modules里找到tinymce的skin包,复制到public/tinymce里,最后在初始化tinymce时的init里配置skin_url:
<editor :init="{skin_url:‘/tinymce/skins/ui/oxide‘}"></editor>
注:资源用绝对路径引入时,读取的是public文件夹里的资源。如果应用没有部署在域名的根部,那么需要为 URL 配置 publicPath前缀。
<editor :init="{skin_url:`${publicPath}tinymce/skins/ui/oxide`}"></editor> ... data () { return { publicPath: process.env.BASE_URL } }
3. 配置
-
一些常用的配置属性
browser_spellcheck: true, // 拼写检查 branding: false, // 去水印 elementpath: false, //禁用编辑器底部的状态栏 statusbar: false, // 隐藏编辑器底部的状态栏 paste_data_images: true, // 允许粘贴图像 menubar: false, // 隐藏最上方menu
-
plugins
使用某个插件需要先引入这个插件,例:
import ‘tinymce/plugins/fullscreen‘ import ‘tinymce/plugins/preview‘ plugins: ‘fullscreen preview‘
-
toolbar
可以使用“|”给工具栏分组,把某一类功能划分成一组,例:
toolbar: ‘bold italic underline | alignleft aligncenter alignright‘
4. 定制
-
将语言改为中文
步骤:
- 在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/
- 把下载的语言包放到之前新建的tinymce文件夹里
- 初始化时添加以下代码
language_url: `/tinymce/langs/zh_CN.js`, language: ‘zh_CN‘,
-
在tinymce5工具栏添加自定义功能按钮
this.tinymceInit = { ... toolbar: ‘imageUpload‘, setup: (editor) => { editor.ui.registry.addButton(‘imageUpload‘, { tooltip: ‘插入图片‘, icon: ‘image‘, onAction: () => { } }) } }
以上是关于tinymce 5更新后,如何使用tinymce-vue的主要内容,如果未能解决你的问题,请参考以下文章