如何將自定義按鈕和對話框遷移到 TinyMCE 5

Question

我有一個第三方 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
});

我嘗試了其他幾種可能性來找到 create 函數：

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

一切都無濟於事

Answer 1

在第 5 版中，TinyMCE 使用了新的 UI 框架。 為版本 4.x 編寫的提供自定義 UI 控制元素的第三方插件可能不適用於版本 5。

正如此 GitHub 問題線程中所述， tinymce.ui.Factory已被棄用且不會重新實現，因此不再可能創建控制工廠。

添加按鈕等 UI 元素的方法也從 v4 更改為 v5。 官方遷移指南詳細介紹了這些方法的新位置和配置簽名。

tl;dr 這個特定的插件可能不適用於 v5 的新 UI 框架，但仍然有使用新系統自定義 UI 的方法。