【Vue】整合tinymce富文本编辑器

👉 前言

富文本是一个比较常用的功能，但是又有很多的坑，在选择的时候也看了很多的文章，最终决定选择tinymce。为什么选择这个呢，第一个就是UI我觉得很好看，第二个就是文档比较完善，还有对应的中文版本，各个API也较为友好，还有一个就是插件化，按需引入。常见的富文本以及分析也有大佬做过文章了，详细的可以看花裤衩大佬的这篇文章常见富文本。

📁 相关文档

• tinymce官方文档
• tinymce中文文档

🔨 安装tinymce

注：vue2中不能使用@tinymce/tinymce-vue为4以上的版本

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

npm install tinymce@5.10.3 -S

编译器默认是英文的，如果需要汉化，可以前往中文汉化包下载

在项目的public文件夹下新建一个tinymce文件夹，用来存放主题和语言包，以及后面可能需要自定义的插件。将node_modules/tinymce/skins（主题）复制到public/tinymce中。另外在tinymce中新建一个langs目录，用来存放下载好的汉化包。

✅ 正式开始

<template>
  <div>
    <tinymce-editor
      :id="tinymceId"
      :value="content"
      :init="init"
      :witdh="width"
      :height="height"
      :resize="resize"
      :disabled="disabled"
      @input="onInput"
    />
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import TinymceEditor from '@tinymce/tinymce-vue'
// 引入配置信息
import defaultConfig from './config'
import { isEmpty } from '@/utils/validate'

export default {
  name: 'Editor',
  components: { TinymceEditor },
  props: {
    id: {
      type: String,
      default: function() {
        // 这个id一定要写，否则会出现莫名其妙的问题。
        return 'tinymce-' + Date.now() + Math.floor(Math.random() * 1000)
      }
    },
    // 内容
    content: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 宽度
    width: {
      type: [String, Number],
      default: '100%'
    },
    // 高度
    height: {
      type: [String, Number],
      default: 450
    },
    // 是否允许拖动
    resize: {
      type: [String, Boolean],
      default: true
    },
    // 菜单栏
    menubar: {
      type: String,
      default: ''
    },
    // 工具栏
    toolbar: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tinymceId: this.id,
      init: Object.assign(defaultConfig, {
        // 组件值覆盖默认配置
        width: this.width,
        height: this.height,
        resize: this.resize,
        menubar: isEmpty(this.menubar) ? defaultConfig.menubar : this.menubar,
        toolbar: isEmpty(this.toolbar) ? defaultConfig.toolbar : this.toolbar
      })
    }
  },
  methods: {
    onInput(content) {
      this.$emit('update:content', content)
    }
  }
}
</script>

为了让代码更加的优雅，以及方便管理配置和插件，这里将配置信息单独做一个config.js来管理。

// 引入主题和图标信息
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/icons/default/icons'

// 引入插件
// https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/code' // 源代码插件
import 'tinymce/plugins/pagebreak' // 分页符插件
import 'tinymce/plugins/charmap' // 特殊符号插件
import 'tinymce/plugins/emoticons' // 表情插件
import 'tinymce/plugins/save' // 保存插件
import 'tinymce/plugins/preview' // 预览插件
import 'tinymce/plugins/print' // 打印
import 'tinymce/plugins/image'// 上传图片插件
import 'tinymce/plugins/media'// 视频插件
import 'tinymce/plugins/link' // 链接插件
import 'tinymce/plugins/anchor' // 锚点插件
import 'tinymce/plugins/codesample' // 代码插件
import 'tinymce/plugins/table'// 表格插件
import 'tinymce/plugins/searchreplace' // 查找、替换插件
import 'tinymce/plugins/hr' // 水平分割线插件
import 'tinymce/plugins/insertdatetime' // 时间日期插件
import 'tinymce/plugins/paste' // 粘体插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import 'tinymce/plugins/fullscreen' // 全屏插件
import 'tinymce/plugins/help' // 帮助插件

import { upload } from '@/api/system/common'

// 配置信息
// https://www.tiny.cloud/docs/configure/integration-and-setup/
export default {

  /**
   * 语言路径
   */
  language_url: '/tinymce/langs/zh_CN.js',

  /**
   * 语言
   */
  language: 'zh_CN',

  /**
   * 主题样式路径
   */
  skin_url: '/tinymce/skins/ui/oxide',

  /**
   * 文本样式路径
   */
  content_css: '/tinymce/skins/content/default/content.min.css',

  /**
   * 表情路径
   */
  emoticons_database_url: '/tinymce/emojis/emojis.min.js',

  /**
   * 宽度
   */
  width: '100%',

  /**
   * 高度
   */
  height: 450,

  /**
   * 插件
   */
  plugins: 'lists code pagebreak charmap emoticons save preview print image media link paste ' +
           'anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime',

  /**
   * 菜单栏
   * file 文件
   * edit 编辑
   * view 视图
   * insert 插入
   * format 格式
   * tools 工具
   * table 表格
   * help 帮助
   */
  menubar: 'file edit view insert format tools table help',

  /**
   * 工具栏
   * https://www.tiny.cloud/docs/demo/full-featured/
   * | formatselect fontselect fontsizeselect | 段落、字体、字号
   * | undo redo | 撤销、重做
   * | code bold italic underline strikethrough | 源代码、粗体、斜体、下划线、删除线
   * | alignleft aligncenter alignright alignjustify | 左对齐、中间对齐、右对齐、两端对齐
   * | outdent indent numlist bullist insertdatetime | 减少缩进、增加缩进、编号列表、项目列表、时间日期
   * | table forecolor backcolor removeformat | 表格、文字颜色、背景色、清除格式
   * | hr searchreplace pagebreak charmap emoticons | 水平分割线、查找替换、分页符、特殊符号、表情
   * | fullscreen preview save print | 全屏、预览、保存、打印
   * | image media link anchor codesample | 上传文件、上传素材、插入链接、锚点、插入代码
   */
  toolbar: '| formatselect fontselect fontsizeselect ' +
           '| undo redo ' +
           '| code bold italic underline strikethrough ' +
           '| alignleft aligncenter alignright alignjustify ' +
           '| outdent indent numlist bullist insertdatetime ' +
           '| table forecolor backcolor removeformat ' +
           '| hr searchreplace pagebreak charmap emoticons ' +
           '| fullscreen preview save print ' +
           '| image media link anchor codesample ',

  /**
   * 工具栏展开方式
   */
  toolbar_mode: 'sliding',

  /**
   * 是否允许拖动
   * true（仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）
   */
  resize: false,

  /**
   * 底部状态栏
   */
  statusbar: true,

  /**
   * 是否显示版权信息
   */
  branding: false,

  /**
   * 是否允许黏贴图片
   */
  paste_data_images: true,

  /**
   * 时间日期格式化
   */
  insertdatetime_formats: ['%H点%M分', '%Y年%m月%d日', '%Y年%m月%d日 %H点%M分', '%Y-%m-%d %H:%M'],

  // 默认使用base64格式
  images_upload_handler: function(blobInfo, success, failure) {
    const maxSize = 2
    const blob = blobInfo.blob()

    if (blob.size / 1024 / 1024 > maxSize) {
      failure('图片大小不能超过' + maxSize + 'MB')
      return
    }

    const formData = new FormData()
    formData.append('file', blob, blobInfo.fileName)

    upload(formData).then(res => {
      success(res.data.fileUrl)
    }).catch(() => {
      failure('文件上传失败，请重试')
    })
  }

}

注意： 如果需要引入表情插件，则要把node_modules/tinymce/plugins/emoticons/js下的emojiimages.min.js放置在public下，否则无法使用。

❔ 如何使用自定义的图片上传？

官方有提供一个上传的url配置，但是需要后台配合返回指定的数据格式。

这里我们还是希望可以自定义参数，这样才不对后台产生影响，实现images_upload_handler函数即可，如果没有实现的话，默认是使用base64格式的图片。

images_upload_handler: function(blobInfo, success, failure) {
    const maxSize = 2
    const blob = blobInfo.blob()

    // 判断图片大小
    if (blob.size / 1024 / 1024 > maxSize) {
        failure('图片大小不能超过' + maxSize + 'MB')
        return
    }

    // 组装图片信息
    const formData = new FormData()
    formData.append('file', blob, blobInfo.fileName)

    // 调用上传图片接口
    upload(formData).then(res => {
        // 将返回的全路径赋值给success回调函数即可
        success(res.data.fileUrl)
    }).catch(() => {
        failure('文件上传失败，请重试')
    })
}

🔴 使用效果

以上就是整合tinymce的所有内容了，如果有疑问或者建议，欢迎在评论区讨论。