TinyMCEをカスタマイズ

久しぶりにTinyMCEをカスタマイズする案件があり、以下のカスタマイズを行いました。

bタグがstrongに変換されないようにする

extended_valid_elements: 'b',
formats:{
  bold:[{inline:"b",remove:"all"}],
},

extended_valid_elements: 'b',

formats:{

bold:[{inline:"b",remove:"all"}],

見出しの選択肢をカスタマイズする

block_formats: "見出し1(h2)=h2;見出し2(h3)=h3;見出し3(h4)=h4",

1	block_formats: "見出し1(h2)=h2;見出し2(h3)=h3;見出し3(h4)=h4",

※見出しをツールバーに出すのは「formatselect」

下線をstyleではなくuで追加する

formats:{
  underline:[{inline:"u",remove:"all"}]
},

formats:{

underline:[{inline:"u",remove:"all"}]

Bとは別でstrongボタンを作る

setup: function(editor) {
  editor.addButton('strong', {
    text: 'STRONG', // 「強調」とかでもいい
    onclick: function() {
      let editor = tinymce.activeEditor;
      let html = editor.selection.getContent();
      editor.insertContent( '<strong>' + html + '</strong>' );
    }
  });
},

setup: function(editor) {

editor.addButton('strong', {

text: 'STRONG', // 「強調」とかでもいい

onclick: function() {

let editor = tinymce.activeEditor;

let html = editor.selection.getContent();

editor.insertContent( '<strong>' + html + '</strong>' );

}

});

（ツールバーに「strong」を追加）

設定はすべて

tinymce.init({});

1	tinymce.init({});

の中に書きます。

関連記事