叨嗒嗵 - vue
type: channel
link: https://dotatong.cn/index.php/tag/vue/
items: tinymce多图上传插件开发教程

tinymce多图上传插件开发教程
type: item
date: 2020-08-22T03:02:00+00:00
description: 该教程主要针对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 () { ret…