这篇博客的目的是记录一下Vue 中使用 tinymce 富文本编辑器，其中参考了一下 www.cnblogs.com/wisewrong/p… 这篇博客，但原博客只兼容 Tinymce 4.x 不支持最新版本，所以在此做了更新。

特别说明，此博客适用于 tinymce 6.x

版本说明

"vue": "^2.6.14"，
"@tinymce/tinymce-vue": "^3.2.8",
"tinymce": "^6.1.2",

• 如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce。
• 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public 目录下

初始化

引入以下文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom';
import 'tinymce/icons/default';

tinymce-vue 是一个组件，需要在 components 中注册，然后直接使用

<Editor v-model="tinymceHtml" :init="editorInit"></Editor>

编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skins 文件，content_css 指向 content.css 。 注意，需要使用哪套theme，就将目录指到对应文件。如下面的黑暗模式

editorInit: {
  skin_url: '/skins/ui/oxide',
  content_css: '/skins/content/default/content.css',
  // 黑暗模式
  // skin_url: '/skins-2/ui/oxide-dark',
  // content_css: '/skins-2/content/dark/content.css',
  height: 300,
}

同时在 mounted 中也需要初始化一次： 如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象。

mounted () {
  tinymce.init({})
}

扩展插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件。

import 'tinymce/plugins/image';
import 'tinymce/plugins/link';

添加plugin:

plugins: 'link image',

添加 toolbar:

toolbar: 'link image',

最后贴一下完整代码：

<template>
  <div class='tinymce'>
    <h1>tinymce</h1>
    <Editor v-model='tinymceHtml' :init='editorInit'></Editor>
    <div v-html='tinymceHtml'></div>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom';
import 'tinymce/icons/default';

// plugin, 更多plugin，请参考官方文档
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/media'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'tinymce',
  data () {
    return {
      tinymceHtml: '请输入内容',
      editorInit: {
        skin_url: '/skins/ui/oxide',
        content_css: '/skins/content/default/content.css',
        height: 300,
        plugins: 'link lists image code table wordcount media',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  mounted () {
    // 如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象。
    tinymce.init({})
  },
  components: {Editor}
}
</script>

上传图片

默认配置是不支持上传图片的，需要上传图片需要按照文档添加相应配置，才会出现上传操作按钮。

多语言

默认显示英文，如果需要其他语言，需要自行下载对应的语言包，通过language_url 和 language 设置。 language_url 和语言包设置方法，同 skin_url 。

editorInit: {
  // ...
  language_url: '/static/tinymce/zh_CN.js',
  language: 'zh_CN',
}

更多配置请参考官方文档