TinyMCEにふりがなボタンの追加

　どうせやるならプラグインにしてフォルダーを追加すれば入力できるようにしたい。プラグインの追加の方法を読んで改造してみた。ルビボタンを押すとウィンドウを開いて「ふりがなを入れる文字」と「ふりがな」を入力するとふりがなが追加される。

www.tiny.cloud

furiganaフォルダーにplugin.min.jsというファイル名で保存

tinymce.init({
plugins: [furigana],
toolbar:'furigana'
});

tinymce.PluginManager.add('furigana', function(editor, url) {
  var openDialog = function () {
    return editor.windowManager.open({
      title: 'ふりがなを振る',
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'ruby',
            label: 'ふりがなをつける文字'
          },
                    {
            type: 'input',
            name: 'rt',
            label: 'ふりがな'
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onSubmit: function (api) {
        var data = api.getData();
        /* Insert content when the window form is submitted */
        editor.insertContent('<ruby>' + data.ruby +'<rt>' + data.rt + '</rt></ruby>');
        api.close();
      }
    });
  };
  /* Add a button that opens a window */
  editor.ui.registry.addButton('furigana', {
    text: 'ルビ',
    onAction: function () {
      /* Open window */
      openDialog();
    }
  });
  /* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
  editor.ui.registry.addMenuItem('furigana', {
    text: 'ルビ',
    onAction: function() {
      /* Open window */
      openDialog();
    }
  });
  /* Return the metadata for the help plugin */
  return {
    getMetadata: function () {
      return  {
        name: 'ルビ',
        url: 'https://99nyorituryo.hatenablog.com/'
      };
    }
  };
});

99nyorituryo.hatenablog.com

99nyorituryo.hatenablog.com