TinyMCE custom toolbar button to set CSS property of selected text

Question

The docs are fairly clear on how to add a custom toolbar button but what I need to be able to do is to set/unset a CSS property of the currently selected text using the button.

Specifically I need to be able to set/unset the CSS property "writing-mode" to/from "vertical-rl" for the currently selected text when the button is selected.

How can I do this?

Answer 1

Thank you for your reply it lead me to what seems to be working for me. Which is this (I still have more testing to do):

window.addEventListener('DOMContentLoaded', () => {
  tinymce.init({
    toolbar: 'vrt_btn',

    setup: (editor) => {
      editor.on('Init', e => {
        tinymce.activeEditor.formatter.register("vrt", {
          selector: "p, div, h1, h2, h3, h4, h5, h6",
          classes: "vrt",
          styles: { "writing-mode": "vertical-rl" }
        });
      });

      editor.ui.registry.addButton('vrt_btn', {
        icon: 'edit-block',
        tooltip: "Set text to vertical",
        onAction: () => tinymce.activeEditor.formatter.toggle("vrt")
      });
    }
  });
});

This adds a button called "vrt-btn" and the styles that I registered as "vrt" are applied to any selected text when the button is pressed.

The button is placed in the tool bar by add "vrt_btn" at am appropriate place in tinymce.init({ selector: ... plugins: ... toolbar: 'undo redo... vrt_tbn ..." ...