English 中文(简体)
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 )

最佳回答

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.

问题回答

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(); }
            }
        ]
    });

});

tinyMCE.activeEditor.execCommand( commandName );

where commandName is the command registered to the preview button.

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

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

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




相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签