MT5 のWYSIWYG を拡張 "CKEditor for Movable Type" を使ってみる。

CKEditor for Movable Type の編集画面イメージ

CKEditor for Movable Type の編集画面イメージ

MT5(Movable Type 5) の WYSIWYG を拡張 "CKEditor for Movable Type" を使ってみたので、そのメモ。

MT5デフォルトのWYSIWYGエディタでは、テーブルの編集やテキストの装飾なども簡単にできないし、HTMLソースを直接編集してやろうにも、ソースが1行になっちゃって読みにくく、なかなか骨が折れる。

そこで探してみると、高機能なWYSIWYGエディタがMT5用のプラグインとして出ているようなので、これを使ってみよう、ということに。

というわけで、 こちらのサイトを参考に、CKEditor for Movable Type を使ってみることにしました。

CKEditor for Movable Type のソースを入手

Github上のダウンロードページで、CKEditor for Movable Typeを入手する。

ここでは、現時点で最新版の CKEditor-1.074.zip をダウンロードした。

CKEditor for Movable Type をMT5にインストール

CKEditor for Movable Type をMT5にインストールする。MT5にインストールするので、MT5はすでにセットアップされているものとして進む。(されていない場合は過去記事「Movable Type 5 をセットアップしてみた」などを参照)

ダウンロードしてきたZIPを解凍すると、ドキュメント系のファイル3つの他に、次の2つのディレクトリが得られる。

  • mt-static
  • plugins

これを、それぞれ所定の場所に上書きアップロードする。

mt-static
MT5セットアップ時のスタティックディレクトリ(mt-static)ディレクトリ
plugins
MT5セットアップ時のアプリケーションディレクトリ直下にある plugins ディレクトリ

その後、MT5の管理画面へアクセスすると、次のような画面で、アップグレードをするように指示される。

CKEditorのアップグレード画面

「アップグレード開始」ボタンを押して次へ進むと、データベースの更新処理が走ってインストールは完了する。

おー、かんたん!

使ってみる

CKEditorのインストールが完了した状態でブログ記事の編集画面を開き、右上あたりにあるフォーマット欄で「リッチテキスト」編集を選択すると使えるようになっているのがわかる。

CKEditorの編集画面。アイコンがたくさん増えた

MTのデフォルトのWYSIWYG(←これも大して使ってみたことないのだが 汗)から比べると、UIボタンがたくさん増えていて、機能がいっぱいあるのが伺える。

今回、高機能WYSIWYGを入れようと思ったきっかけは、テーブル作成の機能が欲しかったからなのだが、もちろんちゃんとあって、ワードみたいなグラフィカルな編集が可能になっている。配置したテーブルを右クリックすると、テーブルの編集メニューが出てくるし、ちゃんとできてる。すごい。

その他、絵文字や特殊文字をマウスクリックで入力できる機能や、画像やFlashを埋め込む機能、文字色・背景色もマウスクリックだけで操作することができるなど、たくさんの機能が追加された。

しかし個人的に嬉しいのは、参考サイトの方も触れているが、ソースコードのフォーマットがキレイという点。デフォルトのWYSIWYGと比べて格段に読みやすいソースを出力してくれる。

これだけでも入れとく意味あるな、個人的には。

カスタマイズしてみる

管理画面の左メニューから、「ツール」⇒「プラグイン」と開いて出た画面の中にある、「CKEditor for Movable Type 1.074」の、プラグイン名をクリックすると詳細が開くので、その中の「設定」を押すと、いくつかの設定項目が出てくる。

詳しくいじってはいないが、それぞれ "カスタム" を選択すると、JSONやらCSSやらJavaScriptやらのソースが出てきて、結構細かい制御ができそうな雰囲気を、パっと見で感じる。

けど、今日はこれ以上つっこまないでおこ。
("してみる" と見出ししておきながら、たいしてしてみなくてごめんなさい。)

アンインストールしてみる

一応最後に、アンインストールもやってみた。

管理画面の左メニューから、「ツール」⇒「プラグイン」と開いて出た画面の中にある、「CKEditor for Movable Type 1.074」の「無効」ボタンを押す。削除はされないが、UIはデフォルトWYSIWYGに戻る。

プラグインを無効化しても、CKEditor で編集した記事がたちまち壊れるようなことはなさそうだ。

関連記事


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る