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

【问题标题】：How to migrate custom buttons and dialogs to TinyMCE 5如何将自定义按钮和对话框迁移到 TinyMCE 5
【发布时间】：2019-03-05 07:22:31
【问题描述】：

我有一个第三方 Bootstrap 插件（可能是 EOL），它向工具栏添加了按钮，这反过来又打开了一个对话框，我可以从中选择 Bootstrap 元素以添加到内容中。

它使用了以下代码：

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);

但是它说 Factory 是未定义的或者 create 是一个不存在的函数。我可以用什么来完成这项工作，显示按钮以及单击时显示对话框？我已经更新了以下代码来查看 bsItems：

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

我尝试了其他几种可能性来找到创建函数：

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

无济于事

【问题讨论】：

标签： javascript jquery tinymce tinymce-5

【解决方案1】：

在第 5 版中，TinyMCE 使用了新的 UI 框架。为 4.x 版编写的提供自定义 UI 控件元素的第三方插件可能不适用于 5 版。

如this GitHub issue thread 中所述，tinymce.ui.Factory 已被弃用且不会重新实现，因此不再可能创建控制工厂。

添加按钮等 UI 元素的方法也从 v4 更改为 v5。 official migration guide 详细介绍了这些方法的新位置和配置签名。

tl;dr 这个特定的插件可能不适用于 v5 的新 UI 框架，但仍有使用新系统自定义 UI 的方法。

【讨论】：