peter
3 years ago
21 changed files with 550 additions and 1792 deletions
@ -0,0 +1,7 @@ |
|||
// Exports the "anchor" plugin for usage with module loaders
|
|||
// Usage:
|
|||
// CommonJS:
|
|||
// require('tinymce/plugins/anchor')
|
|||
// ES2015:
|
|||
// import 'tinymce/plugins/anchor'
|
|||
require('./plugin.js') |
|||
@ -0,0 +1,254 @@ |
|||
|
|||
import { |
|||
loadJS_ifrEditArea, |
|||
loadCSS_ifrEditArea, |
|||
isPlugin, |
|||
// updateElm,
|
|||
updateAttrib, |
|||
getIdByClassName, |
|||
__assign, |
|||
isElm |
|||
// dataFormToElmPartStr,
|
|||
// elmToDataForm,
|
|||
// hasElm
|
|||
} |
|||
from '../hm_utils/index' |
|||
(function() { |
|||
'use strict' |
|||
|
|||
const pluginOptions = { |
|||
jsArr: [], |
|||
cssArr: [], |
|||
name: 'hmupload', |
|||
className: 'hmupload', // 判断依据，建议和name值一致
|
|||
cmdName: 'cmdhmupload', |
|||
editName: 'hmupload_edit', |
|||
dataForm: { |
|||
'data-hm_id': '', |
|||
'data-hm_type': 'upload', |
|||
'img': '', |
|||
'value': '', |
|||
'style.marginTop': '' |
|||
} |
|||
} |
|||
|
|||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|||
|
|||
// 初始设置
|
|||
const setup = function(editor) { |
|||
// 编辑器初始化后执行
|
|||
editor.on('init', function() { |
|||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|||
}) |
|||
// 右键菜单，选定目标
|
|||
editor.on('contextmenu', function(evt) { |
|||
const elm = evt.target |
|||
editor.selection.select(elm) |
|||
}, true) |
|||
} |
|||
|
|||
const open = function(editor) { |
|||
editor.windowManager.open({ |
|||
title: '新增按钮', |
|||
size: 'normal', // 'normal', 'medium' or 'large'
|
|||
body: { |
|||
type: 'panel', |
|||
items: [ |
|||
{ |
|||
type: 'input', |
|||
name: 'data-hm_id', |
|||
label: '名称', |
|||
placeholder: '按钮名称' |
|||
}, |
|||
{ |
|||
type: 'input', |
|||
name: 'id', |
|||
label: '唯一ID', |
|||
placeholder: '唯一ID' |
|||
}, |
|||
{ |
|||
type: 'input', |
|||
name: 'class', |
|||
label: '样式名', |
|||
placeholder: '样式名' |
|||
} |
|||
// {
|
|||
// type: 'input',
|
|||
// name: 'spacing',
|
|||
// label: '间距',
|
|||
// placeholder: '距离顶部的间距'
|
|||
// }
|
|||
] |
|||
}, |
|||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className), |
|||
buttons: [ |
|||
{ |
|||
type: 'cancel', |
|||
name: 'cancel', |
|||
text: '取消' |
|||
}, |
|||
{ |
|||
type: 'submit', |
|||
name: 'save', |
|||
text: '确定', |
|||
primary: true |
|||
} |
|||
], |
|||
onSubmit: function(api) { |
|||
const dataForm = api.getData() |
|||
// console.log(dataForm)
|
|||
dataForm['data-hm_type'] = pluginOptions.dataForm['data-hm_type'] |
|||
const hmType = dataForm['data-hm_type'] |
|||
const className = pluginOptions.className |
|||
const elm = editor.selection.getNode() |
|||
|
|||
let ele_upload, elm_img |
|||
if (elm.className.indexOf(className + '-img') >= 0) { |
|||
ele_upload = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|||
elm_img = elm |
|||
} else if (elm.className.indexOf(className) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|||
ele_upload = elm |
|||
elm_img = isElm(elm, 'data-hm_type', hmType) ? elm.nextElementSibling : undefined |
|||
} |
|||
|
|||
if (elm && isPlugin(elm, className)) { |
|||
// console.log('更新', elm)
|
|||
// 更新
|
|||
updateElm(editor, ele_upload, elm_img, dataForm, changeHandler) |
|||
api.close() |
|||
} else { |
|||
// 插入
|
|||
// console.log('插入', dataForm)
|
|||
insertElm(editor, dataForm) |
|||
api.close() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 右击编辑弹框回显
|
|||
const elmToDataForm = function(editor, initDataForm, pluginClassName) { |
|||
const elm = editor.selection.getNode() |
|||
const dataForm = __assign({}, initDataForm) |
|||
// console.log(dataForm)
|
|||
const hmType = initDataForm['data-hm_type'] |
|||
if (isPlugin(elm, pluginClassName)) { |
|||
let ele_upload, elm_img |
|||
if (elm.className.indexOf(pluginClassName + '-img') >= 0) { |
|||
ele_upload = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|||
elm_img = elm |
|||
} else if (elm.className.indexOf(pluginClassName) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|||
ele_upload = elm |
|||
elm_img = isElm(elm, 'data-hm_type', hmType) ? elm.nextElementSibling : undefined |
|||
} |
|||
// console.log(elm_img)
|
|||
// console.log(ele_upload)
|
|||
dataForm['data-hm_id'] = ele_upload.getAttribute('data-hm_id') |
|||
dataForm['id'] = ele_upload.getAttribute('id') |
|||
// dataForm['class'] = ele_upload.getAttribute('class') ? ele_upload.getAttribute('class').split(' ')[1] : ''
|
|||
// dataForm['spacing'] = elm.parentNode.style ? elm.parentNode.style.marginTop.replace('px', '') : ''
|
|||
} |
|||
return dataForm |
|||
} |
|||
|
|||
const insertElm = function(editor, dataForm) { |
|||
// console.log(dataForm)
|
|||
const doc = editor.contentDocument || editor.contentWindow.document |
|||
const className = pluginOptions.className |
|||
const id = getIdByClassName(doc, className) |
|||
const name = dataForm['data-hm_id'] |
|||
const hmType = dataForm['data-hm_type'] |
|||
const ID = dataForm['id'] |
|||
// const customClass = dataForm['class']
|
|||
// const imgList = dataForm['imgList']
|
|||
// const spacing = dataForm['spacing']
|
|||
const win = editor.contentWindow |
|||
// const domStr_upload = `<input type="file" multiple="multiple" id="${ID}" class="${className}" data-hm_type="${hmType}" data-hm_id="${name}" value="${name}"></input>`
|
|||
const domStr_upload = `<div class="uploadBtn" id="${ID}" data-hm_type="${hmType}" data-hm_id="${name}"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjQ5OTg4MDMxMTU5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMzMDMiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+QGZvbnQtZmFjZSB7IGZvbnQtZmFtaWx5OiBmZWVkYmFjay1pY29uZm9udDsgc3JjOiB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LndvZmYyP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgid29mZjIiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS53b2ZmP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgid29mZiIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LnR0Zj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoInRydWV0eXBlIik7IH0KPC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxNC4zNTM1NTMgMjAzLjEyMTgxNWM0MS43NDk5NzUgMCA4Mi4xNjk2ODEgOC4xODYyNyAxMjAuMjM1ODM1IDI0LjI1MTgyNCAzNi44MzgyMTMgMTUuNTUzOTEyIDY5Ljg5MDI3NyAzNy44NjE0OTcgOTguMjM1MjM1IDY2LjMwODc4NCAyOC40NDcyODcgMjguNDQ3Mjg3IDUwLjY1MjU0MyA2MS40OTkzNSA2Ni4zMDg3ODQgOTguMjM1MjM1IDE2LjA2NTU1NCAzOC4wNjYxNTQgMjQuMjUxODI0IDc4LjQ4NTg2IDI0LjI1MTgyNCAxMjAuMjM1ODM1cy04LjE4NjI3IDgyLjE2OTY4MS0yNC4yNTE4MjQgMTIwLjIzNTgzNWMtMTUuNTUzOTEyIDM2LjgzODIxMy0zNy44NjE0OTcgNjkuODkwMjc3LTY2LjMwODc4NCA5OC4yMzUyMzUtMjguNDQ3Mjg3IDI4LjQ0NzI4Ny02MS40OTkzNSA1MC42NTI1NDMtOTguMjM1MjM1IDY2LjMwODc4NC0zOC4wNjYxNTQgMTYuMDY1NTU0LTc4LjQ4NTg2IDI0LjI1MTgyNC0xMjAuMjM1ODM1IDI0LjI1MTgyNHMtODIuMTY5NjgxLTguMTg2MjctMTIwLjIzNTgzNS0yNC4yNTE4MjRjLTM2LjgzODIxMy0xNS41NTM5MTItNjkuODkwMjc3LTM3Ljg2MTQ5Ny05OC4yMzUyMzUtNjYuMzA4Nzg0LTI4LjQ0NzI4Ny0yOC40NDcyODctNTAuNjUyNTQzLTYxLjQ5OTM1LTY2LjMwODc4NC05OC4yMzUyMzUtMTYuMDY1NTU0LTM4LjA2NjE1NC0yNC4yNTE4MjQtNzguNDg1ODYtMjQuMjUxODI0LTEyMC4yMzU4MzVzOC4xODYyNy04Mi4xNjk2ODEgMjQuMjUxODI0LTEyMC4yMzU4MzVjMTUuNTUzOTEyLTM2LjgzODIxMyAzNy44NjE0OTctNjkuODkwMjc3IDY2LjMwODc4NC05OC4yMzUyMzUgMjguNDQ3Mjg3LTI4LjQ0NzI4NyA2MS40OTkzNS01MC42NTI1NDMgOTguMjM1MjM1LTY2LjMwODc4NEM0MzIuMTgzODcxIDIxMS4zMDgwODQgNDcyLjYwMzU3NyAyMDMuMTIxODE1IDUxNC4zNTM1NTMgMjAzLjEyMTgxNU01MTQuMzUzNTUzIDEyOS40NDUzODhjLTIxMS40MTA0MTMgMC0zODIuNzA4MTA0IDE3MS4yOTc2OTItMzgyLjcwODEwNCAzODIuNzA4MTA0czE3MS4yOTc2OTIgMzgyLjcwODEwNCAzODIuNzA4MTA0IDM4Mi43MDgxMDQgMzgyLjcwODEwNC0xNzEuMjk3NjkyIDM4Mi43MDgxMDQtMzgyLjcwODEwNFM3MjUuNzYzOTY1IDEyOS40NDUzODggNTE0LjM1MzU1MyAxMjkuNDQ1Mzg4TDUxNC4zNTM1NTMgMTI5LjQ0NTM4OHoiIHAtaWQ9IjMzMDQiIGZpbGw9IiMxMjk2ZGIiPjwvcGF0aD48cGF0aCBkPSJNNTE1Ljk5MDgwNiA3MjYuMDE5Nzg2Yy0yMC4zNjMzNDYgMC0zNi44MzgyMTMtMTYuNDc0ODY4LTM2LjgzODIxMy0zNi44MzgyMTNMNDc5LjE1MjU5MyAzMzYuOTY3MzIzYzAtMjAuMzYzMzQ2IDE2LjQ3NDg2OC0zNi44MzgyMTMgMzYuODM4MjEzLTM2LjgzODIxMyAyMC4zNjMzNDYgMCAzNi44MzgyMTMgMTYuNDc0ODY4IDM2LjgzODIxMyAzNi44MzgyMTNsMCAzNTIuMjE0MjVDNTUyLjgyOTAyIDcwOS41NDQ5MTkgNTM2LjM1NDE1MiA3MjYuMDE5Nzg2IDUxNS45OTA4MDYgNzI2LjAxOTc4NnoiIHAtaWQ9IjMzMDUiIGZpbGw9IiMxMjk2ZGIiPjwvcGF0aD48cGF0aCBkPSJNNjkxLjE3Njk3NiA1NTIuODgwMTg0bC0zNTAuOTg2MzEgMGMtMjAuMzYzMzQ2IDAtMzYuODM4MjEzLTE2LjQ3NDg2OC0zNi44MzgyMTMtMzYuODM4MjEzczE2LjQ3NDg2OC0zNi44MzgyMTMgMzYuODM4MjEzLTM2LjgzODIxM2wzNTAuOTg2MzEgMGMyMC4zNjMzNDYgMCAzNi44MzgyMTMgMTYuNDc0ODY4IDM2LjgzODIxMyAzNi44MzgyMTNTNzExLjU0MDMyMiA1NTIuODgwMTg0IDY5MS4xNzY5NzYgNTUyLjg4MDE4NHoiIHAtaWQ9IjMzMDYiIGZpbGw9IiMxMjk2ZGIiPjwvcGF0aD48L3N2Zz4=" alt=""><input type="file" multiple="multiple" id="${ID}" class="${className}" data-hm_type="${hmType}" data-hm_id="${name}" value="${name}"></input></div>` |
|||
const divs = `<div class="div-uploads" style="margin-top:5px;"><ul id="div-${name}"></ul></div>` |
|||
editor.insertContent(domStr_upload + divs) |
|||
// 渲染控件
|
|||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|||
} |
|||
const updateElm = function(editor, ele_upload, ele_img, dataForm, changeHandler) { |
|||
console.log(123, dataForm['data-hm_id']) |
|||
const name = dataForm['data-hm_id'] |
|||
const ID = dataForm['id'] |
|||
// const spacing = dataForm['spacing']
|
|||
const className = pluginOptions.className |
|||
const customClass = dataForm['class'] |
|||
if (ele_upload) { |
|||
updateAttrib(ele_upload, 'data-hm_id', name) |
|||
updateAttrib(ele_upload, 'id', ID) |
|||
updateAttrib(ele_upload, 'value', name) |
|||
updateAttrib(ele_upload, 'class', `${className} ${customClass}`) |
|||
// ele_upload.parentNode.style.marginTop = spacing + 'px'
|
|||
} |
|||
} |
|||
|
|||
// 编辑控件状态后，触发处理逻辑
|
|||
const changeHandler = function(editor, elm, dataForm) { |
|||
const doc = editor.contentDocument || editor.contentWindow.document |
|||
const win = editor.contentWindow |
|||
const id = editor.dom.getAttrib(elm, 'id') |
|||
|
|||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|||
} |
|||
|
|||
const renderElm = function(doc, win, id, type) { |
|||
} |
|||
|
|||
const register = function(editor) { |
|||
editor.addCommand(pluginOptions.cmdName, function() { |
|||
open(editor) |
|||
}) |
|||
} |
|||
|
|||
const register$1 = function(editor) { |
|||
// 工具栏
|
|||
editor.ui.registry.addButton(pluginOptions.name, { |
|||
icon: 'upload', |
|||
title: '上传', |
|||
tooltip: '上传', |
|||
onAction: function() { |
|||
open(editor) |
|||
}, |
|||
onSetup: function(uploadApi) { |
|||
} |
|||
}) |
|||
// 菜单栏
|
|||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|||
icon: 'upload', |
|||
text: '上传', |
|||
onAction: function() { |
|||
open(editor) |
|||
} |
|||
}) |
|||
|
|||
// 菜单栏（编辑）
|
|||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|||
icon: 'upload', |
|||
text: '编辑', |
|||
onAction: function() { |
|||
open(editor) |
|||
} |
|||
}) |
|||
|
|||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|||
update: function(elm) { |
|||
return isPlugin(elm, pluginOptions.className) ? [pluginOptions.editName] : [] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
function Plugin() { |
|||
global.add(pluginOptions.name, function(editor) { |
|||
setup(editor) |
|||
register(editor) |
|||
register$1(editor) |
|||
}) |
|||
} |
|||
|
|||
Plugin() |
|||
}()) |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue