How do I add a listbox to the TinyMCE editor?

In the TinyMCE plugin i wrote, my listbox wraps selected text in HTML, i do that like this..

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

You might notice my function is reading in some data from a JS var, that won’t be available inside your own script, but here’s a basic trimmed down version that should work for you.

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

Just to make sure i’ve been clear, the above would replace the following part of your code…

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

Hope that helps… 🙂

Follow-up #1

If you’re creating your own TinyMCE instance and not just adding to the WordPress instance the ed var possibly won’t be set.

Change this..

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

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

for.. (off the top of my head)

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

See if that helps..

Follow-up #1

Related Posts: