唯一正确的往TinyMCE里添加“可以插入短代码的按钮”的方法
Tillreetree (99) 开发者 管理团队 11小时前

这个方法从2020年12月6日开始,一直到2025年12月7日,才被正确发现和使用。之前所有尝试都是错误的步骤,现决定公开这个标准的、可维护的方案。

核心原理

大白TinyMCE编辑器提供了标准的扩展机制,通过两个全局变量作为"中间商":

var t_external_toolbar = [];      // 工具栏按钮ID数组
var t_external_plugins = {};      // 插件路径映射

这两个变量在编辑器初始化前定义,在 tinymce.init() 时被读取和使用。这就是插件与编辑器之间的标准接口

具体步骤

第一步:创建 Hook 文件

在自己的插件的hook文件夹创建文件huux_tinymce_post_js_before.htm,内容类似:

<script>
    // 定义外部工具栏按钮
    // 务必使用 push 而不是直接赋值,避免其他插件被顶掉导致问题发生
    t_external_toolbar.push('〔你的插件增加的第一个按钮英文ID〕', '〔你的插件增加的第二个按钮英文ID〕'/* 以此类推 */);

    // 定义外部插件
    // 务必使用对象赋值,避免其他插件被顶掉导致问题发生
    t_external_plugins['〔你的插件英文ID〕'] = 'plugins/〔你的插件英文ID〕/plugin.js'; 
    // 这里的路径会是从TinyMCE的根目录开始的
    // 在本主题里,这个路径是从“网站根目录/plugin/till_theme_htmxtest/view/js/tinymce/”开始的,
    // 独立插件是从“网站根目录/plugin/huux_tinymce/tinymce/”开始的
    // 视情况使用../来返回上一级或多级目录来定位到正确的插件目录
</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>&nbsp;</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>&nbsp;</p>'
            );
        });

        console.log('[MyPlugin] 自定义按钮注册完成');

        // 返回插件的公共API
        return {
            getMetadata: function() {
                return {
                    name: '我的自定义按钮插件',
                    version: '1.0.0',
                    author: '你的名字',
                    url: 'https://yourwebsite.example.com/你的网站'
                };
            },
        };
    });

    console.log('[MyPlugin] 插件成功注册到 TinyMCE');
})();
最新回复 (0)
广告推荐
Tillreetree
开发者 管理团队
广告推荐