How to get reference to FloatPanel from TinyMCE 4.x editor instance

4
votes

I'm using new TinyMCE 4.x editor in inline configuration. In this mode, the editor will contain FloatPanel which holds all the menu items and buttons. I'm handling an event where I have reference to TinyMCE in variable ed. Is there any way simple way to get a reference to FloatPanel holding all the menu items and buttons?

I know that I can get list of matching HTML elements with jquery using $(".mce-container.mce-panel.mce-floatpanel") but I have no idea how to match each panel to each editor in case I have multiple editors on a single page (all those div elements are added to the end of host document when TinyMCE is working in inline mode). In addition, that only gives me list of HTML elements without an easy way to get handle of FloatPanel object.

In short, how to get reference to an container object implementing interface http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.FloatPanel when given http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor?

1
jquerytinymce-4

1 Answers

4
votes

There does not seem to be any documented method, but investigating live JS objects provides some info.

Given ed (instance of TinyMCE Editor), you can do it like this:

var panel = ed.theme.panel;

Note that theme.panel does not exists according to current documentation at http://www.tinymce.com/wiki.php/api4:class.tinymce.Theme.

And if you need to get the respective <div> element, you can do it like this:

var paneldiv = window.document.getElementById(panel._id);

Notice, that we need to use the _id property here. That underscore should give a hint that this is not (officially) public interface. However, I do not know anything better for this use case. This, too, is not officially documented anywhere.