CODEWITHSUNDEEP
javascriptjquerytinymcetinymce-5
blairzotron
blairzotron

Reputation: 289

TinyMCE 5.x - highlight custom button

I created a custom link button and want it appear highlighted/selected when you select/click on the link in the text editor, just like clicking on bold text shows the Bold icon as selected. In TinyMCE 4 you could simply use "stateSelector" to have it highlight when that kind of DOM element was selected, like this:

editor.ui.registry.addButton('SpecialLink', {
        icon: 'link',
        onAction: makeSpecialLink(),
        **stateSelector: 'a[href]'**
});

I can't find anything about what stateSelector was replaced with in TinyMCE 5 and so far all I've been able to do is recreate some of that functionality inside tinymce.init:

    init_instance_callback: function(editor) {
            editor.on("SelectionChange", function(e){
                let elem = editor.selection.getNode();
                if( $(elem).is("a") )
                    console.log("Highlight the Special Link button");
                else
                    console.log("Deselect the Special Link button");
            })
        }

I can reference myMCE.plugins.SpecialLink, but I can't call setActive(true) on it.

Any help would be greatly appreciated!

Upvotes: 1

Views: 2583

Answers (2)

A.G.
A.G.

Reputation: 324

@Muki's answer is similar to what I did, but I referenced the core code for anchor button from tinymce's git repo here https://github.com/tinymce/tinymce/blob/develop/modules/tinymce/src/plugins/anchor/main/ts/ui/Buttons.ts

I changed editor.ui.registry.addButton to editor.ui.registry.addToggleButton and added onSetup: (buttonApi) => editor.selection.selectorChangedWithUnbind('a:not([href])', buttonApi.setActive).unbind instead of stateSelector after onAction.

Something like below:

editor.ui.registry.addToggleButton('SpecialLink', {
        icon: 'link',
        onAction: makeSpecialLink(),
        onSetup: (buttonApi) => editor.selection.selectorChangedWithUnbind('a:not([href])', buttonApi.setActive).unbind
});

Upvotes: 1

Muki
Muki

Reputation: 11

You can use addToggleButton rather than addButton, then call setActive.

Here's a snippet of my code.

  editor.ui.registry.addToggleButton('my-action', {
    icon: null,
    text: 'My action',
    onAction: function onAction() {
       // ...do stuff
    },
    onSetup: function(api) {
      function nodeChangeHandler(){
        const selectedNode = editor.selection.getNode();
        return api.setActive(selectedNode.id === constants.id);
      }
      editor.on('NodeChange', nodeChangeHandler);
    }
  });
}

https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton

Upvotes: 1

Related Questions