Добавить пользовательскую кнопку в TinyMCE в WordPress

Question

Я хочу добавить новую кнопку со всплывающим окном в TinyMCE. Но я никогда не вижу кнопку. Я, вероятно, ошибаюсь в этой модификации. Как вставить новую кнопку в этот код TinyMCE?

У меня есть этот TinyMCE код для показа в Wordpress Front-End:

$qt = ''; 
if($this->options[ 'wpcc_edit_in_html' ]) $qt = array('buttons' => 'strong,em,block,del,ul,ol,li,spell,close'); 
else { 
    $qt = FALSE; 
    add_filter('wp_default_editor', create_function('', 'return "tinymce";')); // force visual editor 
} 
$editor_settings = array(
    'theme_advanced_blockformats' => array('h2','h3','p'), 
    'wpautop' => true, 
    'media_buttons' => false, 
    'tinymce' => array(
     'theme_advanced_buttons1' => 'bold,italic,blockquote,strikethrough,bullist,numlist,spellchecker,|,undo,redo,|,mygallery_button', 
     'theme_advanced_buttons2' => '', 
     'theme_advanced_buttons3' => '', 
     'theme_advanced_buttons4' => '' 
    ), 
    'quicktags' => $qt 
); 

И это один, чтобы вставить новую кнопку:

function filter_mce_button($buttons) { 
     // add a separation before our button, here our button's id is "mygallery_button" 
     array_push($buttons, '|', 'mygallery_button'); 
     return $buttons; 
    } 

    function filter_mce_plugin($plugins) { 
     // this plugin file will work the magic of our button 
     $plugins['myplugin'] = plugin_dir_url(__FILE__) . 'mygallery_plugin.js'; 
     return $plugins; 
    } 

    add_filter('mce_buttons', array($this, 'filter_mce_button')); 
    add_filter('mce_external_plugins', array($this, 'filter_mce_plugin')); 

Answer 1

Прочитайте этот учебник. https://www.gavick.com/magazine/adding-your-own-buttons-in-tinymce-4-editor.html#tc-section-4

Очень подробный учебник. Но самые необходимые следующим образом: в вашем functions.php добавить этот код для регистрации и создания кнопки:

function add_container_button() { 
if (! current_user_can('edit_posts') && ! current_user_can('edit_pages')) 
return; 
if (get_user_option('rich_editing') == 'true') { 
add_filter('mce_external_plugins', 'add_container_plugin'); 
add_filter('mce_buttons_3', 'register_container_button'); 
} 
} 
add_action('init', 'add_container_button'); 


function register_container_button($buttons) { 
array_push($buttons, "|", "skizzar_container"); 
return $buttons; 
} 

function add_container_plugin($plugin_array) { 
$plugin_array['skizzar_container'] = plugin_dir_url(__FILE__) . 'shortcodes-js/container.js';; 
return $plugin_array; 
} 

Тогда вам нужно создать файл JS, который обрабатывает как кнопка действует в редакторе (вы можете увидеть мой упоминаются в приведенной выше коде, как container.js Вот код моего файла JS:..

(function() { 
tinymce.PluginManager.add('skizzar_container', function(editor, url) { 
    editor.addButton('skizzar_container', { 
     title: 'Add a Container', 
     icon: 'icon dashicons-media-text', 
     onclick: function() { 
editor.windowManager.open({ 
    title: 'Container', 
    body: [{ 
     type: 'listbox', 
     name: 'style', 
     label: 'Style', 
     'values': [ 
      {text: 'Clear', value: 'clear'}, 
      {text: 'White', value: 'white'},     
      {text: 'Colour 1', value: 'colour1'}, 
      {text: 'Colour 2', value: 'colour2'}, 
      {text: 'Colour 3', value: 'colour3'}, 
     ] 
    }], 
    onsubmit: function(e) { 
     editor.insertContent('[container style="' + e.data.style + '"]<br /><br />[/container]'); 
    } 
}); 
} 

    }); 
}); 
})(); 

Это создает всплывающее окно с выпадающим меню, в котором пользователь может выбрать стиль Надеется, что это помогает в некотором роде