増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

tinymceカスタマイズ

      2013/06/28

個人的にはCKEDITORが大好きなrmascoです。しかし仕事でMTを使っており、MTのリッチテキストエディタがtinymceを採用していることから、tinymceの勉強もしなければなりません。

どうも昔使った時のイメージから重い、表示が遅いなど食わず嫌いしていましたが、使ってみると最近は高速化もだいぶ進んでいるのと、ブラウザのJavaScriptエンジンも高速化されているので、だいぶ軽いです。僕と同じようにtinymceを食わず嫌いしている人は是非使ってみてください。

それでは本題のtinymceの設定です。

tinymceはckeditorと同じように設定値を渡してあげることによって様々な事ができます。ボタンの場所、ボタンの表示非表示、エンターキーを押した時に入るタグや、フォントサイズの選択肢などなど。ここでは一部使ったものを紹介します。

mode

tinymceを適用するDOMの選択方法を指定します。

tinymce.init({

    mode: “textareas”

});

textareas テキストエリア全てを対象とします
specific_textareas editor_selectorに一致するか、editor_deselectorに一致しないテキスト領域要素をすべて対象とします。
exact elementsに指定されたものを対象とします。
none 全てを対象外とします。ただし、tinyMCE.execCommand(“mceAddControl”, true, “id”)とすることでidをtinymceを適用することができます。

plugins

tinymce内で使用するプラグインをカンマ区切りで指定します。

tinymce.init({

    plugins: “table,contextmenu,paste,-externalplugin”

});

language

tinymce内で使用する言語を指定します。

convert_urls

自動的にurlを相対パスに変更するかどうかを指定します。

tinymce.init({

    convert_urls: “true”

});

editor_selector

tinymceを適用するDOMをクラス名で指定します。

tinymce.init({

    mode: “textarea”,

    editor_selector: “class1,class2”

});

editor_deselector

tinymceを適用しないDOMをクラス名で指定します。

tinymce.init({

    mode: “textarea”,

    editor_deselector: “notEditor1,notEditor2”

});

設定に関するドキュメントはこちらにあります。

http://www.tinymce.com/wiki.php/Configuration

たくさんありすぎてまだまだわからないところも多いですが、もう少しわかるようになったら、このブログに追記します。

 - tinymce