TinyMCE 动态 Buttons/Methods

Question

我正在尝试创建一个 Wordpress 插件，它允许您轻松添加一个下拉菜单，其中包含用于插入短代码的项目。为此，我需要 'hook' 进入 TinyMCE，注册一个自定义插件。我的计划是允许用户使用简单的 PHP 数组设置简码菜单项。

实例化了以下 class，它注册了一个新按钮和插件脚本：

<?php

namespace PaperMoon\ShortcodeButtons;

defined('ABSPATH') or die('Access Denied');

class TinyMce {

    public function __construct()
    {
        $this->add_actions();
        $this->add_filters();
    }

    private function add_actions()
    {
        add_action('admin_head', [$this, 'print_config']);
    }

    public function print_config()
    {
        $shortcodes_config = include PMSB_PLUGIN_PATH . 'lib/shortcodes-config.php'; ?>

        <script type='text/javascript' id="test">
            var pmsb = {
                'config': <?php echo json_encode($shortcodes_config); ?>
            };
        </script> <?php
    }

    private function add_filters()
    {
        add_filter('mce_buttons', [$this, 'register_buttons']);
        add_filter('mce_external_plugins', [$this, 'register_plugins']);
    }

    public function register_buttons($buttons)
    {
        array_push($buttons, 'shortcodebuttons');

        return $buttons;
    }

    public function register_plugins($plugin_array)
    {
        $plugin_array['shortcodebuttons'] = PMSB_PLUGIN_URL . 'assets/js/tinymce.shortcodebuttons.js';

        return $plugin_array;
    }

}

用户会像这样创建一个 PHP 数组（包含在上面的 class 中并在 header 中输出为 javascript 变量）：

<?php

return [
    [
        'title'     => 'Test Shortcode',
        'slug'      => 'text_shortcode',
        'fields'    => [
            'type'  => 'text',
            'name'  => 'textboxName',
            'label' => 'Text',
            'value' => '30'
        ]
    ],
    [
        'title'     => 'Test Shortcode2',
        'slug'      => 'text_shortcode2',
        'fields'    => [
            'type'  => 'text',
            'name'  => 'textboxName2',
            'label' => 'Text2',
            'value' => '30'
        ]
    ]
];

最后，这是实际的插件脚本：

"use strict";

(function() {
    tinymce.PluginManager.add('shortcodebuttons', function(editor, url) {
        var menu = [];

        var open_dialog = function(i)
        {
            console.log(pmsb.config[i]);

            editor.windowManager.open({
                title: pmsb.config[i].title,
                body: pmsb.config[i].fields,
                onsubmit: function(e) {
                    editor.insertContent('[' + pmsb.config[i].slug + ' textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
                }
            });
        }

        for(let i = 0; i <= pmsb.config.length - 1; i++) {
            menu[i] = {
                text: pmsb.config[i].title,
                onclick: function() {
                    open_dialog(i)
                }
            }
        }

        console.log(menu);

        editor.addButton('shortcodebuttons', {
            text: 'Shortcodes',
            icon: false,
            type: 'menubutton',
            menu: menu
        });
    });
})();

按钮注册正常，菜单项也注册正常，但是当点击打开模式 window 时，我收到此错误：

Uncaught Error: Could not find control by type: text

我认为这与以下事实有关：'fields' 来自一个函数，出于某种原因，TinyMCE 不喜欢 - 即使它构建正确。

我曾想过用不同的方式来做这件事 - 通过创建一个输出正确 JS 的 PHP 文件，但如果我这样做，我无法在使用 [= 时将其注册为 TinyMCE 插件15=] 动作挂钩。

我发现 another question 其中运行属于同样的问题，但没有答案。

我真的遇到了这个问题，任何帮助将不胜感激！

Answer 1

好吧，典型的事情发生了 - 我一 post 这个问题，我偶然发现了答案。也许我需要给自己买个橡胶桌鸭？

总之，线索就在错误信息中。尽管看了很多教程都建议使用 'text' 作为控件类型，但实际上是 'textbox'。我猜这是 TinyMCE 的最新变化，我看的教程有点旧。

我搜索了 yet another tutorial 并找到了答案。

TinyMCE 动态 Buttons/Methods

TinyMCE Dynamic Buttons/Methods

javascript

php

wordpress

tinymce

tinymce-4