[英]TinyMCE Dynamic Buttons/Methods
I'm attempting to create a Wordpress plugin which allows you to easily add a dropdown menu with items in for inserting shortcodes. 我正在尝试创建一个Wordpress插件,该插件可让您轻松添加包含用于插入短代码的项目的下拉菜单。 To do this, I need to 'hook' into TinyMCE, registering a custom plugin. 为此,我需要“钩住” TinyMCE,注册一个自定义插件。 My plan is to allow users to setup the shortcode menu items using a simple PHP array. 我的计划是允许用户使用简单的PHP数组设置短代码菜单项。
The following class is instantiated which registers a new button and the plugin script: 实例化以下类,该类注册一个新按钮和插件脚本:
<?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;
}
}
A user would create a PHP array like so (which is included in the above class and output as a javascript variable in the header): 用户可以像这样创建一个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'
]
]
];
Finally, here's the actual plugin script: 最后,这是实际的插件脚本:
"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
});
});
})();
The button registers fine, the menu items also register fine but when it comes to click on to open up a modal window, I get this error: 该按钮可以很好地注册,菜单项也可以很好地注册,但是当点击打开一个模态窗口时,我得到了这个错误:
Uncaught Error: Could not find control by type: text
I think it's something to do with the fact that the 'fields' is coming from a function which, for some reason, TinyMCE doesn't like - even though it's built correctly. 我认为这与“字段”来自某个函数有关,由于某种原因,TinyMCE不喜欢它,即使它是正确构建的。
I had thought of doing this a different way - by creating a PHP file which outputs the correct JS but if I do that, I can't register it as a TinyMCE plugin when using the mce_external_plugins
action hook. 我曾想过用另一种方式做这件事-通过创建一个输出正确JS的PHP文件,但是如果这样做,在使用mce_external_plugins
操作钩子时我无法将其注册为TinyMCE插件。
I found another question which ran in to the same problem with no answer. 我发现了另一个问题 ,却又遇到了同样的问题而没有答案。
I've really hit a wall with this one, any help would be hugely appreciated! 我真的很喜欢这个,任何帮助将不胜感激!
Well, the typical thing happened - as soon as I post the question, I stumble upon the answer. 好吧,典型的事情发生了-当我发布问题时,我偶然发现了答案。 Maybe I need to get myself a rubber desk duck? 也许我需要给自己一个橡皮鸭桌?
Anyway, the clue is in the error message. 无论如何,提示是在错误消息中。 Despite having looked at quite a number of tutorials which all suggest using 'text' as the control type, it's actually 'textbox'. 尽管看过许多教程都建议使用“文本”作为控件类型,但实际上它是“文本框”。 I'm guessing this is a more recent change in TinyMCE and the tutorials I was looking at were a bit older. 我猜想这是TinyMCE中的最新变化,而我正在看的教程有些旧。
I searched for yet another tutorial and found the answer staring me right in the face. 我搜索了另一本教程 ,发现答案正对着我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.