vue tinymce安装及使用

Posted 2023-04-15

参考技术A vue-tinymce-example

第一步，安装

npm i tinymce @packy-tang/vue-tinymce

第二步，搬运

复制node_modules/tinymce目录下所有文件至public/目录下

复制后大概是这样的

然后在public/index.html页面全局引入tinymce

全局引入的本地化处理

第三步，引入并安装插件

具体看 main.js

第四步，使用插件

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: () => {
  
        }
      })
    }
  }