Vue项目中引入 tinymce 富文本编辑器（仅适用于 Tinymce 4.x）

注明：是教程仅适用于 Tinymce 4.x，版本5.x以上不支持

优点：

1. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器；

2. 不需要找后端人员扫码改接口，前后端分离；

缺点：

1.图片上传只能上传url,需要自己改装本地上传图片；

一、资源下载

npm install @tinymce/tinymce-vue -S

npm install tinymce@4.5.10 -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

// 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理

tinymce 默认是英文界面，所以还需要下载一个中文语言包

然后将这个语言包放到 static 目录下，为了结构清晰，我包了一层 tinymce 目录

 二、初始化

在components文件夹里新建一个EditorTinymce.vue组件,引入以下文件

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';

如果找不到  import 'tinymce/themes/modern/theme'  可以替换成  import 'tinymce/themes/silver/theme' 

代码见下：

<template>
  <div>
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
    <!-- 预览功能，如不需要，可将下面一行代码注释删除 -->
    <div v-html='tinymceHtml'></div>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
// import 'tinymce/themes/silver/theme' 
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

export default {
  name: 'EditorTinymce',
  components: {
    Editor
  },
  data () {
    return {
      tinymceHtml: '',
      init: {
        // language_url: '/static/tinymce/zh_CN.js',   // vue-cli 2.x 使用这个
        language_url: '/tinymce/zh_CN.js',   // vue-cli 3.x 创建的 typescript 项目，将 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'
        language: 'zh_CN',
        // skin_url: '/static/tinymce/skins/lightgray',   // vue-cli 2.x 使用这个
        skin_url: '/tinymce/skins/lightgray',  // vue-cli 3.x 创建的 typescript 项目，将 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        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 () {
    // 在 mounted 中也需要初始化一次
    tinymce.init({})
  },
}
</script>

 三、扩展插件

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

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

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

import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

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

plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',

四、效果图