如何将自定义按钮和对话框迁移到 TinyMCE 5

Question

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

Answer 1

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.