Question

我尝试创建一个Wordpress插件，允许您轻松添加带有项目的下拉菜单以插入短代码。要做到这一点，我需要勾结＆＃39;进入TinyMCE，注册一个自定义插件。我的计划是允许用户使用简单的PHP数组设置短代码菜单项。

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

<?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数组（包含在上面的类中，并作为标题中的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
        });
    });
})();

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

Uncaught Error: Could not find control by type: text

我认为这与“＆＃39;字段”这一事实有关。来自某个功能，由于某种原因，TinyMCE不喜欢 - 即使它是正确构建的。

我曾想过以不同的方式做这件事 - 通过创建一个输出正确JS的PHP文件，但如果我这样做，我就不能在使用mce_external_plugins动作时将其注册为TinyMCE插件钩。

我发现another question遇到了同样的问题但没有回答。

我真的碰到了这一块墙，任何帮助都会非常感激！

Answer 1

嗯，典型的事情发生了 - 一发表这个问题，我偶然发现了答案。也许我需要自己做一个橡皮桌鸭子？

无论如何，线索在错误信息中。尽管已经查看过相当多的教程，这些教程都建议使用“text”作为控件类型，但它实际上是“文本框”。我猜这是TinyMCE最近的一个变化，我看到的教程有点老了。

我搜索了yet another tutorial，发现答案正好盯着我。

TinyMCE动态按钮/方法

1 个答案: