CODEWITHSUNDEEP
formattinymcepre
pend
pend

Reputation: 23

Add the Code Format to its own button in the toolbar

I'm doing my own TinyMCE toolbar and I want to add the exact same functionality as when you choose Format>Code, but as its own button in the toolbar. Is that possible and how should I do that?

Thank you!

Upvotes: 0

Views: 450

Answers (2)

Iqbal Kabir
Iqbal Kabir

Reputation: 1610

Probably toggle button is more convenient to use.

tinymce.init({
    selector: '#editor',
    menubar: false,
    height: 250,
    toolbar: 'codeinline', // code button

    setup: (editor) => {
        editor.ui.registry.addToggleButton('codeinline', {
            text: 'code',
            tooltip: "Format as code",
            onAction: (_) => editor.execCommand('mceToggleFormat', false, 'code'),
            onSetup: (api) => {
                const changed = editor.formatter
                    .formatChanged('code', (state) => api.setActive(state));
                return () => changed.unbind();
            }
        });
    }
});

Upvotes: 0

pend
pend

Reputation: 23

I figured it out. You can add your own button and then have it execute a command.

setup: function(editor) {
    editor.ui.registry.addButton('strikeout', {
      icon: 'sourcecode',
      tooltip: "Format as code",
      onAction: function() {
        editor.execCommand('mceToggleFormat', false, 'code');
      }
    });
}

Upvotes: 2

Related Questions