这个方法从2020年12月6日开始,一直到2025年12月7日,才被正确发现和使用。之前所有尝试都是错误的步骤,现决定公开这个标准的、可维护的方案。
核心原理
大白TinyMCE编辑器提供了标准的扩展机制,通过两个全局变量作为"中间商":
var t_external_toolbar = [];
var t_external_plugins = {};
这两个变量在编辑器初始化前定义,在 tinymce.init() 时被读取和使用。这就是插件与编辑器之间的标准接口。
具体步骤
第一步:创建 Hook 文件
在自己的插件的hook文件夹创建文件huux_tinymce_post_js_before.htm,内容类似:
<script>
t_external_toolbar.push('〔你的插件增加的第一个按钮英文ID〕', '〔你的插件增加的第二个按钮英文ID〕');
t_external_plugins['〔你的插件英文ID〕'] = 'plugins/〔你的插件英文ID〕/plugin.js';
</script>
第二步:编写插件文件
创建文件plugins/myplugin/plugin.js:
(function() {
'use strict'
// 调试信息,确认插件加载
console.log('[MyPlugin] 自定义按钮插件开始加载...')
// 检查 tinymce 是否可用
if (typeof tinymce === 'undefined') {
console.error('[MyPlugin] tinymce 未定义,插件未加载')
return
}
var PluginManager = tinymce.PluginManager
if (!PluginManager) {
console.error('[MyPlugin] PluginManager 未找到,插件未加载')
return
}
// 注册插件
PluginManager.add('myplugin', function(editor) {
console.log('[MyPlugin] 正在为编辑器初始化自定义按钮:', editor.id)
// 折叠内容按钮
editor.ui.registry.addButton('myplugin_foldcontent', {
icon: 'collapse',
tooltip: '插入折叠内容',
onAction: function() {
editor.windowManager.open({
title: '插入折叠内容',
size: 'normal',
body: {
type: 'panel',
items: [
{
type: 'input',
name: 'title',
label: '折叠标题',
placeholder: '例如:点击查看详情',
value: '点击展开'
},
{
type: 'textarea',
name: 'content',
label: '折叠内容',
placeholder: '输入要折叠的内容...',
flex: true
}
]
},
buttons: [
{
type: 'cancel',
text: '取消'
},
{
type: 'submit',
text: '插入',
primary: true
}
],
onSubmit: function(api) {
var data = api.getData()
var content = data.content || '这里是折叠的内容...'
editor.insertContent(
'<details open class="foldable" style="border:1px solid #ddd;margin:10px 0;border-radius:4px;">' +
'<summary>' +
data.title + '</summary>' +
'<div>' + data.content + '</div>' +
'</details><p> 
)
api.close()
}
})
}
})
// 添加快捷键支持
editor.addShortcut('Alt+Shift+F', '插入折叠内容', function() {
editor.execCommand('mceInsertContent', false,
'<details open class="foldable" style="border:1px solid #ddd;margin:10px 0;border-radius:4px;">' +
'<summary>点击展开</summary>' +
'<div>隐藏内容</div>' +
'</details><p> 
)
})
console.log('[MyPlugin] 自定义按钮注册完成')
// 返回插件的公共API
return {
getMetadata: function() {
return {
name: '我的自定义按钮插件',
version: '1.0.0',
author: '你的名字',
url: 'https://yourwebsite.example.com/你的网站'
}
},
}
})
console.log('[MyPlugin] 插件成功注册到 TinyMCE')
})()