从tinymce 4到tinymce 5的代码迁移-动作功能问题真/假

如何解决从tinymce 4到tinymce 5的代码迁移-动作功能问题真/假

我在将插件从 tinymce 4 迁移到 tinymka 5 时遇到问题。控制台告诉我 “Uncaught (in promise) TypeError: btn.active is not a function”

我找不到 tinymce 5 的等价物。有人可以替换它吗？

代码如下：

tinymce.PluginManager.add('phonelink',function(editor,url) {
            // Add a button that opens a window
            var linkText = "";
            var linkTitle = "";
            var link = "";
            // tinymce.DOM.loadCSS(url + '/css/phonelink.css');
            editor.ui.registry.addButton('phonelink2',{
                text: 'asddas',icon: 'image-options',onSetup: updateOnSelect,onAction: onClickPhoneButton
            });
            // Adds a menu item to the tools menu
            editor.ui.registry.addMenuItem('phonelink',context: 'tools',onAction: onClickPhoneButton,onSetup: updateOnSelect
            });
            function onClickPhoneButton(){
                editor.windowManager.open({
                    title: '123213123',body: {
                        type: 'panel',items: [
                            {type: 'input',name: 'phone',label: 'Teléfono',value: link},{type: 'input',name: 'showtext',label: 'Texto a mostrar',value: linkText},name: 'title',label: 'Título',value: linkTitle}
                        ]
                    },buttons: [
                        {
                            text: 'Close',type: 'cancel',onclick: 'close'
                        },{
                            type: 'submit',name: 'submitButton',text: 'Stwórz',primary: true
                        }
                    ],onAction: function(e) {

                        alert('Toggle menu item clicked');
                    },onSubmit: function(e) {
                        var data = e.getData();
                        var hrefLink = '<a title="' + data .title + '" href="tel:+34' + data .phone + '">' + data .showtext + '</a>';
                        if(link !== ''){
                            editor.setContent(hrefLink);
                        }else{
                            editor.insertContent(hrefLink);
                        }

                        e.close();
                    }
                });
            }
            function updateOnSelect() {
                var btn = this;

                const editorEventCallback = function (e) {

                    var node = editor.selection.getNode();
                    var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1

                    btn.active(isTelLink);

                    if(isTelLink){
                        link = node.href;
                        link = link.replace("tel:+34","");
                        linkTitle = node.title;
                        linkText = node.text;
                    }
                };
                editor.on('NodeChange',editorEventCallback);
                return function (btn) {
                    editor.off('NodeChange',editorEventCallback);
                }

            }
        });

我在文档中寻找替代品，但一无所获。

解决方法

TinyMCE 5 不再通过 this 传递按钮和菜单实例。相反，它将 API 实例作为第一个参数传递，因此您需要将 updateOnSelect 函数更改为如下所示：

function updateOnSelect(api) {
    const editorEventCallback = function (e) {

        var node = editor.selection.getNode();
        var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1

        api.setActive(isTelLink);

        if(isTelLink){
            link = node.href;
            link = link.replace("tel:+34","");
            linkTitle = node.title;
            linkText = node.text;
        }
    };
    editor.on('NodeChange',editorEventCallback);
    return function (btn) {
        editor.off('NodeChange',editorEventCallback);
    }
}

您会注意到 var btn = this 已被删除，并且将项目设置为活动的 API 是 setActive 而不是 active。这可以在此处的文档中找到：https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton 和 https://www.tiny.cloud/docs/ui-components/menuitems/#togglemenuitems（请参阅两个链接中的 API 部分）。

在上面，您可能已经注意到两个引用“切换”项。这是 TinyMCE 5 中的另一个变化，因为不同类型的按钮/菜单项具有单独的注册 API。因此，您还需要切换到使用 editor.ui.registry.addToggleButton 和 editor.ui.registry.addToggleMenuItem。如果需要，可以在此处找到更多详细信息：https://www.tiny.cloud/docs/migration-from-4x/#customtoolbarbuttons

以下是显示上述更改的示例小提琴：https://fiddle.tiny.cloud/B5haab。

希望有帮助！