CODEWITHSUNDEEP
javascriptjquerytinymcetinymce-5
Swimmer
Swimmer

Reputation: 13

How to migrate custom buttons and dialogs to TinyMCE 5

I have a third party Bootstrap plugin (probably EOL), which added buttons to the toolbar, which in turn opened a dialog from where I could select Bootstrap elements to add to the content.

It used the following code:

var insertBtn = tinymce.ui.Factory.create({
    type: elType,
    classes: elClass,
    text: bsText['button'],
    icon: 'icon-btn',
    name: 'insertBtnBtn',
    tooltip: bsTip['button'],
    onclick: function() {
        showDialog('bootstrap-btn.php', 'Add button', 580, 'bsBtn');
    }
});
bsItems.push(insertBtn);

But it says that Factory is undefined or that create is a non-existing function. What can I use to make this work, to show the buttons as well as showing the dialog on click? I already updated the following code to view bsItems:

editor.ui.registry.addButton('bootstrap', {
    type: 'buttongroup',
    classes: 'bs-btn',
    items: bsItems
});

And I tried several other possibilities to find the create function:

editor.ui.registry.create()
editor.ui.Factory.create()
editor.ui.create()
tinymce.ui.registry.create()
tinymce.ui.Factory.create()
tinymce.ui.create()

All to no avail

Upvotes: 1

Views: 902

Answers (1)

Tiny Lincoln
Tiny Lincoln

Reputation: 1102

With version 5, TinyMCE uses a new UI framework. Third party plugins written for version 4.x that provided custom UI control elements will likely not work with version 5.

As noted in this GitHub issue thread, tinymce.ui.Factory has been deprecated and will not be re-implemented, so it is no longer possible to create control Factories.

The methods to add UI elements like buttons have also changed from v4 to v5. The official migration guide goes into a fair amount of detail regarding the new locations and configuration signatures of these methods.

tl;dr This particular plugin might not work with v5's new UI framework but there are still ways of customizing the UI using the new system.

Upvotes: 1

Related Questions