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