tinyMCEに独自ツールバーを追加

最近お世話になっているWYSIWYGエディタのtinyMCE。

基本ほりこむだけのお手軽さも助かる。

しかし、少し癖もあるので、使いこなすには慣れも必要。

 

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

 

やったことは、ツールバーに独自の項目を追加する方法。

私の場合はYoutubeの動画をレスポンシブ対応するためにclassで囲う必要があるが、どうも普通にdivで囲うと中途半端にpタグに囲われてしまう。

ということで、ボタン一つで実装できるようにカスタマイズ。

 

headタグ内の設定情報記述箇所に追加。

1つはtoolbarに表示したい情報を追加

 

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

 

最後のYoutubeを追加。

 

 

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

 

<pre class="lang:default decode:true ">setup: function (editor) {

editor.addButton('Youtube', {

text: 'Youtube',

icon: false,

onclick: function () {

editor.insertContent('

&lt;div class="youtube"&gt;ここに埋め込みコード&lt;/div&gt;

');

}

});

}</pre>

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

以上です。