Code migration from tinymce 4 to tinymce 5 - problem with action function (true / false)

user_14662080 0
Viewed 317

I have a problem with migrating the plugin from tinymce 4 to tinymka 5. The console tells me "Uncaught (in promise) TypeError: btn.active is not a function"

I can not find an equivalent for tinymce 5. Can someone replace it?

Code below:

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

            }
        });

I searched the documentation for a replacement, but found nothing.

tinymce-4 tinymce-5 tinymce wysiwyg
1 Answers

TinyMCE 5 no longer passes the button and menu instance via this. Instead it passes an API instance as the first parameter, so you'll want to change your updateOnSelect function to something like this:

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

You'll note var btn = this has been removed and that the API to set an item as active is setActive instead of active. This can be found in the documentation here: https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton and https://www.tiny.cloud/docs/ui-components/menuitems/#togglemenuitems (see the API section in both links).

In the above, you may have noticed both reference "Toggle" items. That's another change in TinyMCE 5, as different types of buttons/menu items have a separate registration API. So you'll also need to swap to using editor.ui.registry.addToggleButton and editor.ui.registry.addToggleMenuItem. More details about that can be found here if needed: https://www.tiny.cloud/docs/migration-from-4x/#customtoolbarbuttons

Here's an example fiddle showing the changes mentioned above: https://fiddle.tiny.cloud/B5haab.

Hopefully that helps!

user_112755150
Related