TinyMCE动态按钮/方法

我试图创建一个Wordpress插件，它允许您轻松地添加下拉菜单项目以插入简码。为此，我需要'挂钩'到TinyMCE中，注册一个自定义插件。我的计划是允许用户使用简单的PHP数组设置简码菜单项。TinyMCE动态按钮/方法

下面的类被实例化，其登记一个新的按钮和插件脚本：

<?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

我认为这事做的事实“字段'来自一个函数，由于某种原因，TinyMCE不喜欢 - 即使它构建正确。

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

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

我真的打了这堵墙，任何帮助将非常感谢！

来源

2016-01-13 0Neji

那么，典型的事情发生 - 只要我发布的问题，我偶然发现答案。也许我需要让自己变成一张橡皮桌上的鸭子？

无论如何，线索是在错误信息。尽管看过很多教程都提到使用“文本”作为控件类型，但它实际上是“文本框”。我猜这是TinyMCE的一个更近的变化，我看的教程有点老。

我搜索了yet another tutorial，发现答案盯着我的脸。

来源

2016-01-13 13:26:41 0Neji

TinyMCE动态按钮/方法

回答

相关问题