CODEWITHSUNDEEP
javascripttinymce
HongKilDong
HongKilDong

Reputation: 1316

How to click TinyMCE toolbar's button programmatically?

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 )

Upvotes: 4

Views: 13684

Answers (7)

Goaul
Goaul

Reputation: 1560

Whoever needs it, for Rails with capybara, to click on any plugin icon on toolbar:

page.execute_script("$(tinymce.activeEditor.execCommand('mceEmoticons'))")

Instead of 'mceEmoticons' can be used any other plugin, just add 'mce' prefix and first capital letter of plugin name.

Upvotes: 0

l2aelba
l2aelba

Reputation: 22167

You can also do something like:

editor.ui.registry.getAll().buttons['my-button'].onAction()

Full example for my case: (I try to trigger without import anything)

const parentTinyMCEId = 'mce_0' // When you know the target id
window.tinymce.editors.forEach(editor => { // Loop to find correct editor
  if (editor.id === tinyMCEId) {
    editor.execCommand('mceFocus', false, editor.id) // Set focus to the editor
    setTimeout(() => {
      editor.ui.registry.getAll().buttons['my-button'].onAction() // Trigger it!
    }, 100)
    return false // Stop looping
  }
})

Upvotes: 1

Jack Sleight
Jack Sleight

Reputation: 17118

I know this is an old question but I had this same issue with tinyMCE 4, and couldn't get any of the solutions above to work. This worked for me:

tinyMCE.activeEditor.buttons.charmap.onclick();

So for example I was trying to create a custom menu in a plugin that included some built in commands:

tinymce.PluginManager.add('myplugin', function(editor) {

    editor.addButton('mymenu', {
        type: 'menubutton',
        text: 'Insert',
        icon: false,
        menu: [
            {
                text: 'Special Character',
                icon: 'charmap',
                onclick: function() { editor.buttons.charmap.onclick(); }
            }
        ]
    });

});

Upvotes: 7

realmag777
realmag777

Reputation: 2088

Button creation example

To trigger click to TinyMCE button from somewhere you want do next:

jQuery(".js_inpost_gallery_insert_shortcode").click(function() {
            tinyMCE.get(tinyMCE.activeEditor.editorId).controlManager.get(tinyMCE.activeEditor.editorId + "_" + 'pn_tinymce_button').settings.onclick();
            return false;
        });

Upvotes: 0

zeta
zeta

Reputation: 1557

I wanted to add that I also needed to set the button active(highlighted). I used this code to accomplish this:

tinyMCE.activeEditor.controlManager.setActive('spellchecker', true);

Replace spellchecker with the toolbar option name that you set in theme_advanced_buttons on TinyMCE init.

Cheers!

By the way, if you want to turn on a button by default, there's a forum post here that it might help you: http://www.tinymce.com/forum/viewtopic.php?pid=95893#p95893

Upvotes: 2

Vitaly Sazanovich
Vitaly Sazanovich

Reputation: 694

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.

Upvotes: 7

mjangda
mjangda

Reputation: 370

tinyMCE.activeEditor.execCommand('commandName');

where commandName is the command registered to the preview button.

Upvotes: 5

Related Questions