时间戳

首页 > 解决方案 > 从 tinymce 4 到 tinymce 5 的代码迁移 - 动作函数问题（真/假）

tinymce - 从 tinymce 4 到 tinymce 5 的代码迁移 - 动作函数问题（真/假）

问题描述

我在将插件从 tinymce 4 迁移到 tinymka 5 时遇到问题。控制台告诉我“未捕获（承诺）类型错误：btn.active 不是函数”

我找不到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', {
                text: 'asddas',
                icon: 'image-options',
                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},
                            {type: 'input', 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);
                }

            }
        });

我搜索了文档以寻找替代品，但一无所获。

标签： tinymcewysiwygtinymce-4tinymce-5

解决方案

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已被删除，并且将项目设置为活动的 APIsetActive代替了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.addToggleButtonand editor.ui.registry.addToggleMenuItem。如果需要，可以在此处找到更多详细信息：https ://www.tiny.cloud/docs/migration-from-4x/#customtoolbarbuttons

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

希望这会有所帮助！

推荐阅读