Getting the tinyMCE editor instance on button click

Question

Edit: Added a fiddle example- http://fiddle.tinymce.com/EZbaab/2

I currently have a page with a tinyMCE instance on it and three separate textareas that inherit it.

I have a custom menu that has clickable sub-menu items on it (generated using Django), that when clicked, insert content into the currently active tinyMCE editor (textarea). The trouble is, this happens regardless of WHICH editor toolbar was clicked. So for example if I click the top editor's toolbar item, but have the bottom editor focused, the text gets pasted into the bottom editor.

I need to either force the editor that has it's toolbar clicked to become focused when a menu item is clicked (which happens for the default buttons like bold, italic, underline, but not for my custom menu items)

or I need to pass the instance id of the editor that was clicked into the function that pastes in the text somehow. The difficulty is I'm struggling to find any reference to these two tasks in the documentation.

The tinyMCE init code:

tinyMCE.init({
    forced_root_block : false,
    force_br_newlines : true,
    force_p_newlines : false,
    mode : "textareas",
    theme : "advanced",
    plugins : "contextmenu,paste,save,-stdpara",
    theme_advanced_buttons1 : ",bold,italic,underline,cleanup,|,undo,redo,|,cut,copy,paste,|,stdpara",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    force_br_newlines : true,
    force_p_newlines : false,
    forced_root_block : '',
});

(Where stdpara is my custom menu plugin):

The menu code (stripped out the django and just added some random data:

tinymce.create('tinymce.plugins.StandardParagraphPlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'stdpara':
                var c = cm.createSplitButton('stdparagraph', {
                    title : 'Standard Paragraph',
                image : 'img/para.png',
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : 'Standard Paragraphs', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
                    category_menu = m.addMenu({title : 'Some Title'});
                    category_menu.add({title : 'Some sub-title', onclick : function() { tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text') }); 
                    }});
                return c;
            }
        return null;
    }
});

+1 for a detailed question and even a fiddle

Thariama
– Thariama

2012-08-24 11:41:34 +00:00
Commented Aug 24, 2012 at 11:41 — Thariama
– Thariama, Commented Aug 24, 2012 at 11:41

Thariama · Accepted Answer · 2012-08-24 12:32:26Z

2

I need to either force the editor that has it's toolbar clicked to become focused when a menu item is clicked (which happens for the default buttons like bold, italic, underline, but not for my custom menu items)

This is correct, but the problem lies here

tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text')

This will execute the command on the active Editor. tinyMCE.activeEditor gets reset when the user clicks into the editor for example.

It will be better to address the editor to which the drop-down belongs to. It is somewhat tricky and does not look very elegant, but as long as tinymce does not change the button logic and naming it will be proof for tinymce updates. See my tinymce fiddle here: http://fiddle.tinymce.com/IZbaab/1

answered Aug 24, 2012 at 12:32

Thariama

50.9k13 gold badges146 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PT114 Over a year ago

Thanks, went with this in the end!

Roel van Duijnhoven Over a year ago

Perfect! Note that to get focus it is not necessary to actually insert text. tinyMCE.activeEditor.execCommand('mceInsertContent', false, '') will do.

Moeri · Accepted Answer · 2012-12-18 07:29:51Z

1

For future troubleshooters

The second parameter of createControl(n, cm) - so, the 'cm' parameter- is the contentManager.

To get the current editor, you can simply call cm.editor

To insert content: cm.editor.execCommand('mceInsertContent', false, 'my text')

answered Dec 18, 2012 at 7:29

Moeri

9,3545 gold badges47 silver badges58 bronze badges

Comments

CloudyMarble · Accepted Answer · 2014-01-12 13:20:38Z

1

Don't know if it helps, but I select the respective Text-Field like:

tinyMCE.get('yourtextareaid').execCommand('mceInsertContent', false, 'bla');

edited Jan 12, 2014 at 13:20

CloudyMarble

37.7k70 gold badges103 silver badges133 bronze badges

answered Jan 12, 2014 at 13:00

michl_sof

1011 silver badge6 bronze badges

Collectives™ on Stack Overflow

Getting the tinyMCE editor instance on button click

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related