TinyMCE Plugin for Movable Type1.20Ja のインストール

MovableType管理画面のエントリー編集をDreamweaver風のWYSIWYGエディタにしてくれるプラグインTinyMCE Plugin for Movable Typeがバージョン1.20ja になっていました。
今バージョンよりyoutubeプラグイン、iBrowser EXプラグインが搭載されているようです。そのほかのTinyMCE用プラグインも同梱されているようなので自分好みのエディタにできそうです。

プラグインのダウンロード

プラグインは以下のサイトからダウンロードしてください。

ファイルの解凍~アップロード

ダウンロードしたファイルを解凍するとできる「TinyMCEforMT_JA120」ディレクトリ中の mtstatic、plugin、phpディレクトリの中身をMovableTypeがインストールされているディレクトリ中の同じ名前のディレクトリにアップロードします。

詳しくは公式サイトの設定方法を参考にしてください。

TinyMCE Plugin for Movable Typeをカスタマイズ

解凍してできたフォルダにはカスタマイズのためのテキストファイルがあるので読んで尾おきましょう。

表示ボタンのカスタマイズ 

まずは、タグを挿入するための表示ボタンをカスタマイズしてみます。デフォルトのままでも十分ですが、逆に自分が使わない不必要なタグや、あったほうがいいと思うボタンがありません。 (下はデフォルトの配列)

デフォルトの表示ボタン

この表示ボタンは数を増やしたり、逆に減らしたり、また並び替えたりもできます。TinyMCEのマニュアルのほうに表示できるボタンの種類が書いてあるのでそれを参考にするといいでしょう。
英語ですがHTMLがわかるなら直感的にわかるかと思います。

今回カスタマイズした結果はこんな感じ。

書き換えるファイルは次のファイルです。

/plugins/TinyMCEforMT/TinyMCEforMT.pl

162行目あたりの

Plugins : "table,advimage,advlink,emotions,insertdatetime,preview,youtube,contextmenu,paste,directionality,noneditable,ibrowser",

には使用するTinyMCE用のプラグインが列挙されています。使わないプラグインがあったら削除し、増やしたいプラグインがあったらプラグイン名を追加します。

できるだけWeb標準なサイトづくりを目指すためにcite、abbr、acronymなどのタグを追加できるxhtmlxtrasプラグインを追加しました。

Plugins : "xhtmlxtras,table,advimage,advlink,emotions,insertdatetime,preview,youtube,contextmenu,paste,directionality,noneditable,ibrowser",

次にボタンの配列を決めます。
164、165、166行目あたり、

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,image,ibrowser,cleanup,help,code,separator,forecolor,backcolor,separator,cut,copy,paste,pastetext,pasteword",
theme_advanced_buttons3 : "tablecontrols,separator,hr,removeformat,visualaid,separator,sub,sup,separator,charmap,emotions,separator,youtube,preview", 

これがボタンの配列を決めている部分です。はじめの
「theme_advanced_buttons1」が1段目を表わしています。もし、表示を4段にしたいなら
「theme_advanced_buttons4 : "ボタン名,……"」
を追加します。

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,hr,sub,sup,separator,styleselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "undo,redo,separator,bullist,numlist,separator,outdent,indent,separator,cite,abbr,acronym,inc,del,separator,link,unlink,image,ibrowser,cleanup,removeformat,code,separator,visualaid,separator,charmap,separator,preview,help",
theme_advanced_buttons3 : "tablecontrols", 

上のコードのように変更しました。「 separator 」なんてのがあって面白いです。

今回はとりあえずシンプルになるように機能を減らしました。必要になったら増やすということにします。

  • ご紹介ありがとうございます。

    ますます使い勝手のよいWYSIWYGエディターを目指しますので、今後もよろしくお願いします。

  • 1.XreaにMovable Typeインストール

    Xreaで独自ドメインを取得して広告有りでMovable Type3.33jaを…

  • Movable Type 4のインストール

    Movable Type 4を別のXREAサーバー(S231)にインストールして…

そうのひとりごと

© 2017 PAOLOG