该教程主要针对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: ' ', } ] }, 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', ' <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"/> ') //注册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部分 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