如何为Joomla的TinyMCE编辑器添加菜单项？

直接把TinyMCE插件丢进/media/vendor/tinymce/plugins是没用的——Joomla不会自动扫描加载这个目录下的自定义插件，必须通过Joomla系统插件来注册并加载你的TinyMCE插件，同时配合正确的插件文件结构。以下是完整步骤：

1. 创建Joomla系统插件（核心注册逻辑） #

这个系统插件的作用是告诉Joomla：要加载你的自定义TinyMCE插件，并且把它的菜单项加入编辑器菜单。

插件目录结构 #

在Joomla的plugins/system目录下新建一个文件夹（比如mycustomtinymce），结构如下：

plugins/
└── system/
    └── mycustomtinymce/
        ├── mycustomtinymce.php       # 插件主逻辑文件
        ├── mycustomtinymce.xml       # Joomla插件清单文件
        └── tinymce/
            └── plugins/
                └── mycustomplugin/   # 你的TinyMCE插件目录
                    └── plugin.js     # TinyMCE插件核心代码

编写插件清单文件（mycustomtinymce.xml） #

这个文件是Joomla识别插件的依据，内容示例：

<?xml version="1.0" encoding="UTF-8"?>
<extension version="4.0" type="plugin" group="system" method="upgrade">
    <name>System - My Custom TinyMCE Plugin</name>
    <author>Your Name</author>
    <version>1.0.0</version>
    <description>Adds a custom menu item to TinyMCE's Insert menu</description>
    <files>
        <filename plugin="mycustomtinymce">mycustomtinymce.php</filename>
        <folder>tinymce</folder>
    </files>
    <config>
        <!-- 可选：如果需要后台配置项可以加在这里 -->
    </config>
</extension>

编写插件主逻辑文件（mycustomtinymce.php） #

通过onTinyMCEInit事件注入自定义插件配置：

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Plugin\CMSPlugin;
use Joomla\CMS\Uri\Uri;

class PlgSystemMycustomtinymce extends CMSPlugin
{
    public function onTinyMCEInit($editor, &$config)
    {
        // 注册自定义TinyMCE插件的加载路径
        $pluginUrl = Uri::root() . 'plugins/system/mycustomtinymce/tinymce/plugins/mycustomplugin/';
        $config['external_plugins']['mycustomplugin'] = $pluginUrl . 'plugin.js';

        // 确保插件被加入TinyMCE的启用列表
        if (strpos($config['plugins'], 'mycustomplugin') === false) {
            $config['plugins'] .= ',mycustomplugin';
        }

        // 强制把菜单项加入Insert菜单（避免用户在编辑器配置里移除）
        // 兼容Joomla TinyMCE菜单的字符串/数组两种配置格式
        if (is_string($config['menu'])) {
            $menuParts = explode(',', $config['menu']);
            foreach ($menuParts as &$part) {
                if (strpos($part, 'insert') !== false) {
                    $part .= ' mycustomitem';
                }
            }
            $config['menu'] = implode(',', $menuParts);
        } elseif (is_array($config['menu']) && isset($config['menu']['insert'])) {
            $config['menu']['insert'][] = 'mycustomitem';
        }
    }
}

2. 编写TinyMCE插件代码（plugin.js） #

在mycustomplugin目录下的plugin.js里，注册菜单项到Insert菜单：

tinymce.PluginManager.add('mycustomplugin', function(editor, url) {
    // 注册Insert菜单下的自定义项
    editor.ui.registry.addMenuItem('mycustomitem', {
        text: '我的自定义插入内容', // 菜单显示文本
        icon: 'insert-template', // 可选：用TinyMCE自带图标，或自定义图标路径
        context: 'insert', // 指定菜单归属为Insert菜单
        onAction: function() {
            // 点击菜单后的逻辑示例：弹出对话框插入内容
            editor.windowManager.open({
                title: '插入自定义内容',
                body: {
                    type: 'panel',
                    items: [
                        {
                            type: 'input',
                            name: 'customContent',
                            label: '输入要插入的内容'
                        }
                    ]
                },
                buttons: [
                    { type: 'cancel', text: '取消' },
                    { type: 'submit', text: '插入', primary: true }
                ],
                onSubmit: function(api) {
                    var data = api.getData();
                    // 插入内容到编辑器
                    editor.insertContent('<div class="custom-content">' + data.customContent + '</div>');
                    api.close();
                }
            });
        }
    });
});

3. 安装与启用插件 #

1. 把mycustomtinymce文件夹打包成ZIP文件（注意ZIP根目录直接是插件文件，不要嵌套多余文件夹）。
2. 登录Joomla后台，进入「扩展」->「管理」->「安装」，上传ZIP文件完成安装。
3. 进入「扩展」->「插件」，找到「System - My Custom TinyMCE Plugin」并启用它。
4. 验证：打开任意使用TinyMCE编辑器的页面（比如文章编辑页），点击「插入」菜单，就能看到你的自定义菜单项了。

常见问题排查 #

• 路径错误：在浏览器里直接访问plugin.js的URL（比如https://你的域名/plugins/system/mycustomtinymce/tinymce/plugins/mycustomplugin/plugin.js），确认能正常加载。
• 插件未注册：打开浏览器控制台，输入tinymce.activeEditor.settings.plugins，检查是否包含mycustomplugin。
• 菜单未显示：检查控制台是否有JS报错，或者确认plugin.js里的context: 'insert'是否正确，以及菜单项名称mycustomitem和系统插件里的配置是否一致。

内容的提问来源于stack exchange，提问作者mcnoobins