tinymce多图上传插件开发教程

该教程主要针对vue2下tinymce编辑器的插件简易开发方式，核心目标是简单高效、能用

准备工作

跟随该教程我们来开发一个多图上传的插件，插件姑且命名为：images

在vue项目的src目录下创建存放tinymce插件的目录，比如我的目录是
/src/tinymce/plugins/images

在我们的插件目录下创建index.js

插件内容

/**
 * 文件路径：/src/tinymce/plugins/images/index.js
 */
tinymce.PluginManager.add('images', function (editor) {
  let pluginName = '多图上传'

  let bodyId = editor.getParam('body_id', '', 'hash')

  //配置弹出层
  let openDialog = function () {
    return editor.windowManager.open({
      title: pluginName,
      size: 'medium',
      body: {
        type: 'panel',
        items: [
          {
            name: 'multifile',
            type: 'htmlpanel',
            html: '<input type="file" multiple hidden/>',
          }
        ]
      },
      buttons: [{
        type: 'cancel',
        text: 'Close'
      }, {
        type: 'custom',
        text: 'Save',
        name: 'save',
        primary: true
      }],
      onAction: function (api, details) {
        switch (details.name) {
          case 'save':
            let html = '123'
            editor.insertContent(html)
            api.close()
            break
          default:
            break
        }
      },
      onChange(api, evt) {
        console.log('change')
        console.log(api)
        console.log(evt)
      }
    })
  }

  //添加事件监听
  let addEventListener = function (editor) {

  }

  //添加图标
  editor.ui.registry.getAll().icons.images || editor.ui.registry.addIcon('images', '<svg viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>')

  //注册toolbar按钮
  editor.ui.registry.addButton('images', {
    icon: 'images',
    tooltip: pluginName,
    onAction: function () {
      openDialog()
    }
  })
  //注册菜单选项
  editor.ui.registry.addMenuItem('images', {
    icon: 'images',
    text: pluginName,
    onAction: function () {
      openDialog()
    }
  })
  return {
    getMetadata: function () {
      return {
        name: pluginName,
        url: "https://dotatong.cn",
      }
    }
  }
})

tinymce配置

vue项目中使用images插件

template部分

<editor v-model="myValue" :init="init"></editor>

script部分

import axios from 'axios'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default'
import 'tinymce/themes/silver'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/advlist'//扩展有序列表
import 'tinymce/plugins/preview'
import 'tinymce/plugins/charmap'
// import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/wordcount'// 字数统计插件
import '@/tinymce/plugins/images'//多图上传

export default {
  components: {
    Editor
  },
  data() {
    return {
      myValue: '',
      init: {
        body_id: 'tinymce' + (Math.random() * Date.parse(new Date())).toString().replace('.', ''),
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        // skin_url: '/tinymce/skins/ui/oxide-dark', // 暗色系
        // content_css: '/tinymce/skins/content/dark/content.css', // 暗色系
        height: 500,
        // min_height: 400,
        plugins: 'advlist lists image media table link code wordcount fullscreen preview charmap images',
        toolbar: 'bold italic underline strikethrough | fontsizeselect styleselect | forecolor backcolor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | link unlink image images media charmap | code preview fullscreen | removeformat undo redo',
        branding: false,
        menubar: true,
        forced_root_block: 'div',
        //多图上传处理方法
        images_upload_handler: (blobInfo, success, failure) => {
          let formData = new FormData()

          formData.append('file', blobInfo.blob(), blobInfo.filename())

          axios.post('/upload/image', formData).then(res => {
            success(res.data.data.url)
          }).catch(res => {
            failure(res.info)
          })

          // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          // success(img)
        },
        image_upload(file, index, success) {
          let formData = new FormData()

          formData.append('file', file, file.name)

          console.log('第' + index + '张图片' + file.name + '：正在上传...')
          axios.post('/upload/image', formData).then(res => {
            console.log('第' + index + '张图片' + file.name + '：上传成功')
            success(res.data.data.url)
          }).catch(res => {
            console.log('第' + index + '张图片' + file.name + '：' + res.info)
          })
        }
      }
    }
  },
}

参考内容：https://github.com/x-shadow-x/tinymce-imageupload/blob/master/plugin.js