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

👉 前言

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

📁 相关文档

🔨 安装tinymce

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

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

npm install tinymce@5.10.3 -S

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

image-20220313104605945

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

image-20220313104912853

✅ 正式开始

这里为了方便其他地方引用，封装了一个组件。

<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下，否则无法使用。

image-20220313110137831

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

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

image-20220313110649569

这里我们还是希望可以自定义参数，这样才不对后台产生影响，实现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('文件上传失败，请重试')
 })
}

🔴 使用效果

image-20220313115952340

image-20220313120012102

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