How to click TinyMCE toolbar's button programmatically ?

Question

I want to make preview button as usual form button next to submit button(as it made in most cases of "Post new topic" forms). How can I programmatically simulate toolbar's preview button click ?

I tried $('#article_body_preview').click() but it didn't work. (I use jQuery lib and #article_body_preview is toolbar's preview button element )

Answer 1

tinyMCE.activeEditor.execCommand('commandName');

where commandName is the command registered to the preview button.

Answer 2

I had a similar problem myself. You can find the names of commands in the source code of plugins. Eg. for preview plugin the source code is in jscripts/tiny_mce/plugins/preview/editor_plugin_src.js Look for line #37:

ed.addButton('preview', {title : 'preview.preview_desc', cmd : 'mcePreview'});

So the command name is not 'preview' but 'mcePreview'.

I wanted to set full screen mode on init. I ended up adding

init_instance_callback : 'resizeEditorBox' 

to init.

resizeEditorBox = function (editor) {
            setTimeout("tinyMCE.activeEditor.execCommand('mceFullScreen')", 100);
}

before init and commenting out:

//                    a.win.setTimeout(function() {
//                        tinymce.dom.Event.remove(a.win, "resize", e.resizeFunc);
//                        tinyMCE.get(c.getParam("fullscreen_editor_id")).setContent(c.getContent({format:"raw"}), {format:"raw"});
//                        tinyMCE.remove(c);
//                        a.remove("mce_fullscreen_container");
//                        i.style.overflow = c.getParam("fullscreen_html_overflow");
//                        a.setStyle(a.doc.body, "overflow", c.getParam("fullscreen_overflow"));
//                        a.win.scrollTo(c.getParam("fullscreen_scrollx"), c.getParam("fullscreen_scrolly"));
//                        tinyMCE.settings = tinyMCE.oldSettings
//                    }, 10)

in editor_plugin.js - because I don't need any other mode, just fullscreen mode. Hope that helps.