如何在vue项目中使用Tinymce

我们在项目中，总会遇到需要使用富文本的情况，而Tinymce就是一个很不错的富文本编辑器,如何将Tinymce整合到vue项目中呢？

本文是利用vue-cli3.0结合Tinymce4.x版本做的整合

安装tinymce, @tinymce/tinymce-vue组件

---

npm install tinymce @tinymce/tinymce-vue -S

安装成功后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到public目录下。为了结构清晰，在skins外面包了一层tinymce目录

由于tinymce默认是英文界面，自己项目需要中文界面，所以需要下载中文语言包。还可以下载自己需要的语言包。

下载成功后，将ch_CN.js放在langs的目录下，最后再放在tinymce文件夹下。

初始化

---

引入文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'

tinymce-vue是组件，需要在components中注册，才能使用。

<editor
      id="tinymce"
      v-model="myValue"
      :disabled="disabled"
      :init="init"
      @onKeyUp="handleChange"
    ></editor>

init是初始化配置项，具体API请参考官方文档。

const toolbar = this.disabled
      ? false
      : 'undo redo | bold italic | fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent'
const statusbar = !this.disabled

init: {
	 language_url: '/tinymce/langs/zh_CN.js',
	 language: 'zh_CN',
	 skin_url: '/tinymce/skins/lightgray',
	 menubar: false,
	 height: 300,
	 toolbar,
	 branding: false,
	 statusbar
}

扩展组件

---

默认编辑器只有基本功能，如果需要上传图片，插入表格等就需要添加插件

import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件

添加插件之后，默认会在工具栏toolbar上添加对应的功能按钮，toolbar也可以自定义

plugins: 'lists image media table textcolor wordcount contextmenu',
toolbar: 'undo redo | bold italic | fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent'

我对其进行了封装，方便后续使用。
完整代码如下：

<template>
  <div class="tinymce">
    <editor
      id="tinymce"
      v-model="myValue"
      :disabled="disabled"
      :init="init"
      @onKeyUp="handleChange"
    ></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'

export default {
  name: 'tinymce',
  components: { Editor },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const toolbar = this.disabled
      ? false
      : 'undo redo | bold italic | fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent'
    const statusbar = !this.disabled
    return {
      myValue: this.value,
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/lightgray',
        menubar: false,
        height: 300,
        toolbar,
        branding: false,
        statusbar
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    handleChange() {
      this.$emit('change', this.myValue)
    }
  }
}
</script>

参考资料：
在Vue 使用 TinyMCE 编辑器
语言包
Tinymce官网