TinyMCE / Summer note など

TinyMCEでカスタムボタンを作成する

● TinyMCEでカスタムボタンを作成する


tinymce.init({
  selector: 'textarea',

  toolbar: 'customStrikethrough customToggleStrikethrough',

  setup: function (editor) {

    editor.ui.registry.addToggleButton('customStrikethrough', {
      text: 'Strikethrough',
      onAction: function (api) {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
        api.setActive(!api.isActive());
      }
    });

    editor.ui.registry.addToggleButton('customToggleStrikethrough', {
      icon: 'strike-through',
      onAction: function (_) {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
      },
      onSetup: function (api) {
        editor.formatter.formatChanged('strikethrough', function (state) {
          api.setActive(state);
        });
      }
    });
  },

});

https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/

アイコンはこちら https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/

No.1900
11/12 22:29

edit