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. 定制

  • 将语言改为中文

    步骤:

    1. 在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/
    2. 把下载的语言包放到之前新建的tinymce文件夹里
    3. 初始化时添加以下代码
          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的主要内容,如果未能解决你的问题,请参考以下文章

vue项目如何使用tinymce5

如何在使用 jquery 进行 ajax 操作后清空 TINYMCE 内容

初始化所有 tinyMCE 编辑器后如何设置回调执行?

TinyMce 不显示图标

TinyMCE 能更新文字但不能更新图片,这是为啥呢?

在vue cli 3脚手架里引入tinymce 5富文本编辑器