CODEWITHSUNDEEP
javascriptjquerytinymce
dhulme
dhulme

Reputation: 159

Adding non-button control to TinyMCE editor 4.x

I'm using the TinyMCE editor (version 4.0.1). I've been trying to add a checkbox to the editor toolbar but can't figure out how to do it.

For normal buttons, I've used the addButton function. But I'm stuck on how to add other TinyMCE UI types such as a checkbox to the toolbar.

The documentation for the addButton function says it:

Adds a button that later gets created by the ControlManager. This is a shorter and easier method of adding buttons without the need to deal with the ControlManager directly. But it's also less powerfull if you need more control use the ControlManagers factory methods instead.

I tried to the ControlManager class, but it seems only appear in the TinyMCE 3.x API.

One solution would be to use the UI Factory create method and render the UI item directly to the HTML of the TinyMCE editor, but this seems a little clumsy:

tinyMCE.ui.Factory.create({
  type: 'checkbox',
  checked: true,
  text: 'My checkbox'
}).renderTo($('#mce_92-body')[0]);

Can anyone think of a better approach?

See http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.Checkbox and http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.addButton

Upvotes: 3

Views: 1532

Answers (1)

user3133100
user3133100

Reputation: 11

Inside your tinymce init method:

setup : function(ed) {
                    ed.addButton('check', {
                        type:'checkbox',
                        text: 'some descriptive label',
                    });
                },

Upvotes: 1

Related Questions