webentwicklung-frage-antwort-db.com.de

Wie füge ich dem TinyMCE-Editor eine Listbox hinzu?

Ich habe Probleme beim Hinzufügen eines Listenfelds zum TinyMCE-Editor in Wordpress. Ich habe diese Frage bereits vollständig durchgelesen, aber sie hat mich nicht ganz dorthin gebracht: Wie kann ich der WordPress TinyMCE-Instanz eine geteilte Schaltfläche oder ein Listenfeld hinzufügen . Diese Lösung warnt nur den Wert in einem Dialogfeld. Ich möchte den Shortcode tatsächlich in den TinyMCE-Editor einfügen und kann nicht herausfinden, wie. Ich kann dem TinyMCE-Editor erfolgreich benutzerdefinierte Schaltflächen und Listenfelder hinzufügen, und die Schaltflächen funktionieren, das Listenfeld jedoch nicht. Hier ist mein functions.php Code:

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

Und hier ist mein JS für das Hinzufügen der Listbox zum TinyMCE-Editor:

// 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);

Was muss ich in der JS ändern, damit der Shortcode tatsächlich zu meinem Editor hinzugefügt wird, anstatt nur den Wert der Listbox in einem modalen Dialogfeld anzuzeigen?

filterstinymcewysiwyg
2
Industrial Themes

In dem TinyMCE-Plugin, das ich geschrieben habe, bricht meine Listbox ausgewählten Text in HTML um.

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

Sie werden vielleicht bemerken, dass meine Funktion einige Daten aus einer JS-Var liest, die in Ihrem eigenen Skript nicht verfügbar sind. Hier ist jedoch eine abgespeckte Basisversion, die für Sie funktionieren sollte.

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;
}

Nur um sicherzugehen, dass ich klar war, würde das Obige den folgenden Teil Ihres Codes ersetzen ...

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

Hoffentlich hilft das... :)

Follow-up Nr. 1

Wenn Sie Ihre eigene TinyMCE-Instanz erstellen und nicht nur die WordPress-Instanz hinzufügen, wird die Variable ed möglicherweise nicht festgelegt.

Ändere das..

// Set focus to WordPress editor
ed.focus(); 

// Get selected text
var sel_txt = ed.selection.getContent();

für .. (aus meinem Kopf)

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

Mal sehen, ob das hilft ..

1
t31os

Ich denke, es gibt eine kurze Lösung dafür:

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