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

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

 

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

 

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

 

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

 

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

 

最後のYoutubeを追加。

 

 

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

 

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

以上です。

このエントリーをはてなブックマークに追加

にほんブログ村 IT技術ブログ IT技術メモへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です