今日のMovable Type 4.1:MT-Plugin-FCKeditorカスタムキットVer.2作ったよ: 世界中の１％の人々へ

トップ > Movable Type > 今日のMovable Type 4.1:MT-Plugin-FCKeditorカスタムキットVer.2作ったよ

今日のMovable Type 4.1:MT-Plugin-FCKeditorカスタムキットVer.2作ったよ

2008年2月 2日 08:55

MT4.1の画像アップロード機能はいただけないという方に贈る

Movable Type 4.1は素晴らしいのだが、画像等をアップロードするファイルマネージャー機能が気に入らないと思っているのは僕だけか？どこに画像をあげていいのかわかりにくさは、MT3.3系以前から変わってない。

Movable Type 4.1標準の画像アップロード機能

<form contenteditable="false" mt:asset-id="1" class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="MT4LP5" src="http://www.dakiny.com/archives/image/2008/02/26295396_132.jpg" style="" height="200" width="200" /></form>

書き出すコードもすごくうざい。<form></form>は、出力ファイルでは<span></span>に置き換えられるとはいえ、imageファイルにclassを用意している人間からすればすごく邪魔。商用サイトを構築する場合の多くは画像のプロパティをDBに登録する必要がなく、不要なタグの削除が面倒だ。

これで解決！FCKeditorカスタマイズキットVer.2

という理由(わけ)で、XHMLにこだわる方のために、MT-Plugin-FCKeditor-1.2をハックして、画像管理を楽にするカスタムキットを作ってみたが、なんのことはない。MT-Plugin-FCKeditor-1.2でMT4.1の画像ファイルシステムに対応した仕様を、FCKeditor本来の画像管理システムに戻しただけのハックだ。特徴は以下。

余計なタグを出力しない。
画像のディレクトリ構造がひと目でわかる。
プロパティからclassやstyleを記述できる。

◆ダウンロード

下記URLより、FCKeditor_Customkit_v2.zipをダウンロードしてほしい。
http://sourceforge.jp/projects/fckeditor/files/

MT4.1純正ファイルアップロード機能が利用したい方や、FCKeditor Custom kit Ver.1を利用するといいだろう。ファイルアップロード機能以外Ver.1とVer.2の仕様は同じであり、設定の必要もない。

◆画像のアップロード

では、どんなものかを紹介しよう。

FCKeditor

[イメージ挿入/編集]のアイコンをクリックすると、[イメージプロパティ]が開く

FCKeditor

開いた[イメージプロパティ]から[サーバーブラウザ]をクリックする。

FCKeditor

FCKeditor - Resources Browser（ファイルマネージャー）が起動する

FCKeditor

FCKeditor - Resources Browserで、image/2008/02を開いたところ。ご覧のように階層表示が目でみてわかる。

FCKeditor

参照をクリックしてアップロードファイルを選択し、アップロードすれば、画像はResources Browserに登録される。

FCKeditor

Resources Browserから画像を選択すると、[イメージプロパティ]でサムネールが確認できる。OKをクリックすればエントリー画面に画像が貼付られる。

FCKeditor

エントリーに貼ってみた。ソースを確認してみよう。

<p><img width="200" height="200" src="http://www.dakiny.com/archives/image/2008/02/26295396_132.jpg" alt="MT4LP5" style="" /></p>

このように、正しいXHTMLで出力してくれる。

◆ファイルのアップロード

FCKeditor

１．ダウンロードファイルをおこないたいテキストを選択して[リンク]をクリックするとハイパーリンクのプロパティ画面がポップアップで表示される。
２．[サーバーブラウザ]をクリックする

FCKeditor

フィルマネージャが開く

FCKeditor

[参照]をクリックすればローカルからアップロードできる。リンクしたいファイルを選ぶと

FCKeditor

ハイパーリンクにダウンロードのURLがペーストされる。

FCKeditor

OKをクリックするとこんな感じ。

★設定方法

◆インストール前の設定

ダウンロードしたファイルを解凍して以下のファイルを探し

/mt-static/plugins/FCKeditor/fckeditor/editor/filemanager/connectors/php/config.php

33行目と40行目のパスを利用者のWebのファイル保存ディレクトリの環境に書き換える。

// Path to user files relative to the document root.
$Config['UserFilesPath'] = 'http://www.hoge.com/files/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Usefull if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/virtual/hoge/public_html/www.hoge.com/files/' ;

僕の例（赤字が変更部分）

// Path to user files relative to the document root.
$Config['UserFilesPath'] = 'http://www.dakiny.com/archives/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Usefull if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/virtual/dakiny/public_html/www.dakiny.com/archives/' ;

変更が完了したら保存する。画像のアップロードだけならば、これだけで動作する。