TinyMCEに縦中横ボタンの追加

TinyMCEを縦書きにしたので、半角文字を縦中横にするボタンを追加する。何もしないと半角は横倒しになる。

   formats:{
            tcy: {inline: 'span', 'classes': 'tcy'}
        },

  setup: (editor) => {
    editor.ui.registry.addToggleButton('tcy', {
      text: '縦中横',
      onAction: (api) => {
        editor.execCommand('mceToggleFormat', false, 'tcy');
        api.setActive(!api.isActive());
      }
    });
}

スタイルシート　電書協EPUBのCSSから

/* 縦中横
---------------------------------------------------------------- */
.tcy {
  -webkit-text-combine:         horizontal;
  -webkit-text-combine-upright: all;
  text-combine-upright:         all;
  -epub-text-combine:           horizontal;
}

99nyorituryo.hatenablog.com

トグルボタンの追加

www.tiny.cloud