最近お世話になっているWYSIWYGエディタのtinyMCE。
基本ほりこむだけのお手軽さも助かる。
しかし、少し癖もあるので、使いこなすには慣れも必要。

 

で、今回もそんなtinyの備忘録。ソースがあるから忘れないと思うが、ソースのありかを忘れる可能性大なので。。

 

やったことは、ツールバーに独自の項目を追加する方法。
私の場合はYoutubeの動画をレスポンシブ対応するためにclassで囲う必要があるが、どうも普通にdivで囲うと中途半端にpタグに囲われてしまう。
ということで、ボタン一つで実装できるようにカスタマイズ。

 

headタグ内の設定情報記述箇所に追加。
1つはtoolbarに表示したい情報を追加

 

toolbar: [“undo redo | formatselect | bold italic | Youtube” ],

 

最後のYoutubeを追加。

 

 

次に、Youtubeを押したときの動作を追加

 

setup: function (editor) {
editor.addButton('Youtube', {
text: 'Youtube',
icon: false,
onclick: function () {
editor.insertContent('
<div class="youtube">ここに埋め込みコード</div>
');
}
});
}

見ての通り。アイコン画像を使うこともできるよう。面倒なのでテキスト表記。

以上です。