industrialthemes
  • 0
Новичок

Как добавить список в редактор TinyMCE?

  • 0

У меня возникли проблемы с добавлением списка в редактор TinyMCE в WordPress. Я уже полностью прочитал этот вопрос, но я не понял его полностью: как я могу добавить кнопку разделения или список в экземпляр WordPress TinyMCE. Это решение только предупреждает значение в диалоговом окне. Я хочу вставить шорткод в редактор TinyMCE и не могу понять, как это сделать. Я успешно могу добавлять пользовательские кнопки и списки в редактор TinyMCE, и кнопки работают, а список — нет. Вот мой код functions.php:

// add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap");
   array_push($buttons, "divider");
   array_push($buttons, "quote");
   array_push($buttons, "pullquoteleft");
   array_push($buttons, "pullquoteright");
   array_push($buttons, "boxdark");
   array_push($buttons, "boxlight");
   array_push($buttons, "togglesimple");
   array_push($buttons, "togglebox");
   array_push($buttons, "tabs");
   array_push($buttons, "signoff");  
   array_push($buttons, "fancylist");
   array_push($buttons, "arrowlist");
   array_push($buttons, "checklist");
   array_push($buttons, "starlist");
   array_push($buttons, "pluslist");
   array_push($buttons, "heartlist");
   array_push($buttons, "infolist"); 
   array_push($buttons, "columns");
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['fancylist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['arrowlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['checklist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['starlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pluslist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['heartlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['infolist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

А вот мой JS для добавления списка в редактор TinyMCE:

// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.columns', {
    createControl: function(n, cm) {
        switch (n) {
            case 'columns':
                var mlb = cm.createListBox('columns', {
                    title : 'Add a Column',
                    onselect : function(v) {
                        tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                    }
                });

                // Add some values to the list box
                mlb.add('One Third', 'one_third');
                mlb.add('One Third (last)', 'one_third_last');
                mlb.add('Two Thirds', 'two_thirds');

            // Return the new listbox instance
            return mlb;

        }
        return null;
    }
});
tinymce.PluginManager.add('columns', tinymce.plugins.columns);  

Что мне нужно изменить в JS, чтобы он действительно добавил шорткод в мой редактор, а не просто отображал значение списка в модальном диалоговом окне?

Share
  1. В плагине TinyMCE, который я написал, мой список оборачивает выделенный текст в HTML, я делаю это так.

    onselect : function(v) {
        // Set focus to WordPress editor
        ed.focus(); 
        
        // Get selected text
        var sel_txt = ed.selection.getContent();
    
        // If no text selected
        if( '' == sel_txt )
            return null;
        
        var active_style = toggle_styles[v];
        if( 'undefined' == active_style || typeof( active_style ) != 'object' )
            return null;
        
        tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, '<'+active_style.tag+' class="'+active_style.classes+'">'+sel_txt+'</'+active_style.tag+'> ' );
        //alert( tinyMCE.activeEditor.selection.getNode().nodeName );
        return false;
    } // close onselect function
    

    Вы могли заметить, что моя функция считывает некоторые данные из переменной JS, которые не будут доступны внутри вашего собственного скрипта, но вот базовая урезанная версия, которая должна вам подойти.

    onselect : function(v) {
        // Set focus to WordPress editor
        ed.focus(); 
        
        // Get selected text
        var sel_txt = ed.selection.getContent();
    
        // If no text selected
        if( '' == sel_txt )
            return null;
        
        tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, '<div class="someclass">'+sel_txt+'</div> ' );
    
        return false;
    }
    

    Просто чтобы убедиться, что я понял, приведенное выше заменит следующую часть вашего кода…

    onselect : function(v) {
        tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
    }
    

    Надеюсь, это поможет… 🙂

    Продолжение №1

    Если вы создаете свой собственный экземпляр TinyMCE, а не просто добавляете его в экземпляр WordPress, переменная, ed возможно, не будет установлена.

    Измени это..

    // Set focus to WordPress editor
    ed.focus(); 
    
    // Get selected text
    var sel_txt = ed.selection.getContent();
    

    для.. (внезапно)

    var sel_txt = tinyMCE.activeEditor.selection.getContent();
    

    Посмотрим, поможет ли это..

    • 0
  2. Я думаю, что для этого есть одно короткое решение:

       var mlb = cm.createListBox('columns', {
                    title : 'Add a Column',
                    onselect : function(v) {
                        /* simpler right? */
                        tinyMCE.activeEditor.selection.setContent(v);
                    }
      })
    
    • 0

Оставить ответ

You must login to add an answer.