tinymceで自作ボタンを押したときに、選択中の文字に独自のCSSを適用させたいです

Question

現在の状況

• 現在、サイト内のtextareaにtinymceを適用させています。（tinymceのバージョンは5.10.2です。）
• #textareaを選択するとtinymceが起動します。そこに、独自ボタンを追加しました。

※下記のURLを参考にしました。
https://www.tiny.cloud/docs/demo/custom-toolbar-button/#
https://oxynotes.com/?p=11236

• 独自ボタンを押した際、htmlを挿入することはできました。
• しかし、実現したいことは、選択中の文字列に独自スタイルを付与することです。

tinymce.init({
  selector : '#textarea',
  plugins  : 'paste link autolink preview autoresize',
  toolbar  : 'customButton', //ツールバーに表示する自作ボタン
  setup: function (editor) {
    editor.ui.registry.addButton('customButton', {
      text: 'これは自作ボタンです', //自作ボタンに表記する文字
      onAction: function (_) {
        //以下のコードだとカーソル位置に赤文字の文章が挿入されます。
        //やりたいことは選択中の文章を赤文字にすることです。
        editor.insertContent('<span style="color:#ff0000;">文章</span>');
      }
    });
  }
});

自作ボタンを押したときに、選択中の文字に独自のCSSを適用する方法をご存じの方がおりましたら、お教えいただけましたら幸いです。

何卒、よろしくお願いいたします。

Comments

[m.ts10806]

＞選択中の文章を赤文字にすること
なら「文字色」なので、オプションであるように思いますが・・

[yayak]

オプションを使用して文字を赤色にすることが目的ではなく、「自作ボタンを使用して」ということが今回の目的でしたので質問してみました。まだまだ勉強不足で、お恥ずかしい限りです。精進いたします。。

Answer 1

詳しくないのですが、「tinymce selection wrap」でググったところ、いくつか情報があるように思えました。

WordPress: TinyMCE button that wraps selection in given tag · GitHub

jquery - TinyMCE - How to add a button that wraps selected text with a tag - Stack Overflow

Comments

[yayak]

有難うございます。selectionを使用することで無事にやりたかったことを実現できました！
本当に助かりました、有難うございます！