tinymce

安装tinymce

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

由于这样安装会安装最新版本的tinymce ，
由于我使用的是vue2 与最新的版本部分功能可能不兼容 所以我安装的版本是

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

封装tinymce组件

<template>
  <div>
    <editor id="tinymce" v-bind="$attrs" :init="init" v-on="$listeners" />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'TinyEditor',
  components: {
    editor: Editor
  },
  props: {
    linkList: Array // link_list数据源
  },
  data() {
    return {
      init: {
        selector: '#tinymce',
        height: 300, //编辑器高度
        menubar: true, //顶部菜单栏显示
        language_url: 'static/tinymce/langs/zh-Hans.js', // 中文包的存放路径 可以去下载好中文包 存放在项目目录下引入https://www.tiny.cloud/
        language: 'zh-Hans',
        branding: false, //是否禁用“Powered by TinyMCE”
        statusbar: true, //是否显示底部的状态栏
        plugins: 'link image media table lists fullscreen quickbars',
        toolbar:
          'undo redo | fullscreen | fontselect fontsizeselect | bold italic underline strikethrough  link | formatselect alignleft aligncenter alignright alignjustify | bullist | image media table | forecolor backcolor | indent outdent | superscript subscript | removeformat |',
        link_context_toolbar: false, // link链接的右键增强菜单
        link_list: success => {
          let newlinkList = this.linkList.map(link => {
            return {
              ...link,
              value: `downloadFile('${link.value}')`
            }
          })
          success(newlinkList) // pass link_list data to {productname}
        } // link插件 链接列表
      }
    }
  }
}
</script>

<style lang="scss">
/* 在el-dialog中使用tinymce 插件的弹窗被遮挡 */
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>

调用组件：

<tiny-editor
   ref="editor"
   v-model="content"
   :link-list="linkList"
    >
</tiny-editor>

由于tinymce的官方文档是英文的 我们可以使用某个博主整理的这个中文文档：

http://tinymce.ax-z.cn/