FCKeditor(MovableType)

MovableTypeにWYSIWYGエディタのFCKeditorをインストールしてみる
WYSIWYGエディタとしてだけであれば、MovableTypeのテンプレートファイルを修正する必要はあるものの比較的簡単です。
なにが大変かというとイメージファイルをアップロードできるようにするImageBrowserの機能を動くようにするので丸二日ハマったのでメモ。

設定目標

• MovableTypeは、3.31
• FCKeditorは、2.3.1
• エントリーの部分をFCKeditorに変更する
• ImageBrowserでファイルをアップロードできるようにする
• ImageBrowserのアップロード先、参照先は、http://servername/mt/upload/username/
• ImageBrowserはPHPを使用する
• 複数のブログでアップロードフォルダを分ける
• バージョンアップした場合を考えてなるべく変更はしない

導入手順

1. FCKeditorをこのへんからダウンロード（2006/07/31時点で2.3.1)
2. FCKeditor_2.3.1.zipを海東して、mt-static/FCKeditor フォルダへアップロード
3. FCKeditorの設定（自分用の設定ファイルを作成）

mt-static/FCKeditor/fckconfig.js を mt-static/FCKeditor/myfckconfig.jsとしてコピーして以下の部分を追加・変更

FCKConfig.ToolbarSets["MTStyle"] = [
['Source','-','Save','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','SpecialChar','PageBreak'],
['TextColor','BGColor'],
['FitWindow','-','About'],
'/',
['Style','FontFormat','FontName','FontSize']
] ;
var _FileBrowserLanguage	= 'php' ;	// asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage	= 'php' ;	// asp | aspx | cfm | lasso | php
FCKConfig.LinkUpload = false ;
FCKConfig.ImageUpload = false ;
FCKConfig.FlashUpload = false ;

4. MovableTypeのテンプレートを編集

tmpl/cms/edit_entry.tmpl
4行目ぐらいから挿入（‹div id="edit-entry"›の下ぐらい）
（注）日本語でコメントいれた場合は、MTの文字コード（例えばUTF-8)で保存すること。

‹script type="text/javascript" src="‹TMPL_VAR NAME=STATIC_URI›FCKeditor/fckeditor.js"›‹/script›
‹script type="text/javascript"›
window.onload = function()
{
//初期化
var fck = new FCKeditor("text");
//ベースディレクトリの設定
fck.BasePath = "‹TMPL_VAR NAME=STATIC_URI›FCKeditor/";
//カスタマイズ用設定ファイルのパス
fck.Config["CustomConfigurationsPath"] = fck.BasePath + "myfckconfig.js";
//ツールバーをカスタマイズ
fck.ToolbarSet = "MTStyle";
//高さを増やす
fck.Height = 600;
path = '/UserFile/';
if (  == 1 ){
//ブログ１の保存フォルダ(ドキュメントルートからのフォルダ）
path = '/mt/upload/hoge1/';
} else if (  == 2 ){
//ブログ２の保存フォルダ(ドキュメントルートからのフォルダ）
path = '/mt/upload/hoge2/';
}
//イメージブラウザのフォルダを指定
connector = 'connectors/php/connector.php';
url = fck.BasePath + 'editor/filemanager/browser/default/browser.html';
fck.Config['LinkBrowserURL'] = url + '?Connector=' + connector + '&ServerPath=' + path ;
fck.Config['ImageBrowserURL'] = url + '?Connector=' + connector + '&ServerPath=' + path + '&Type=Image';
fck.Config['FlashBrowserURL'] = url + '?Connector=' + connector + '&ServerPath=' + path + '&Type=Flash';
url = fck.BasePath + 'editor/filemanager/upload/php/upload.php';
fck.Config['LinkUploadURL'] = url + '?ServerPath=' + path;
fck.Config['ImageUploadURL'] = url + '?ServerPath=' + path + '&Type=Image';
fck.Config['FlashUploadURL'] = url + '?ServerPath=' + path + '&Type=Flash';
//textareaタグと置換
fck.ReplaceTextarea();
}
‹/script›

デフォルトの装飾ボタンを削除する場合

if (canFormat && false) {

5. FCKeditorの修正

mt-static/FCKeditor/editor/filemanager/browser/default/connectors/php/config.php

$Config['Enabled'] = true ;
//$Config['UserFilesPath'] = '/UserFiles/' ;


mt-static/FCKeditor/editor/filemanager/browser/default/connectors/php/io.php
二つ目のブログのアドレスが違う場合修正必要(イメージのファイルパスが相対パスになるため）
設定ファイルのFCKConfig.BaseHrefで指定できそうなのだけど、うまくいかなかったのでソースを書き換えた

function GetUrlFromPath( $resourceType, $folderPath )
{
if ( $resourceType == '' )
`//		return RemoveFromEnd( $GLOBALS["UserFilesPath"], '/' ) . $folderPath ;
return 'http://' . $_SERVER['SERVER_NAME'] . RemoveFromEnd( $GLOBALS["UserFilesPath"], '/' ) . $folderPath ;
`	else
`//		return  $GLOBALS["UserFilesPath"] . $resourceType . $folderPath ;
return 'http://' . $_SERVER['SERVER_NAME'] . $GLOBALS["UserFilesPath"] . $resourceType . $folderPath ;
}


mt-static/FCKeditor/editor/filemanager/upload/php/config.php

$Config['Enabled'] = true ;

6. アップロードフォルダを作成

mkdir ドキュメントルート/mt/upload/hoge1
mkdir ドキュメントルート/mt/upload/hoge2
chmod 777 ドキュメントルート/mt/upload/hoge1
chmod 777  ドキュメントルート/mt/upload/hoge2

※その他

• プラグイン

ImageBrowserを置き換えるプラグインがあるようでSOURCEFORGEのFCKeditorのPluginのところにkfm kae’s file manager というのがあり、これを使うとイメージのプレビューが可能になるようです。
（入れてみたところいい感じではあるのですが、ファイルのアップロードのフォームのある場所がわかりにくいような気がしたので、今回はやめました）

• ツールバーのボタンをカスタマイズ

//office2003風
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
//シルバー風
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

参考にしたURL
Full Featured FCKeditor on Movable Type
Built in File Browser
FCKeditor – アップロード機能編
Movable TypeでWYSIWYGエディタ(FCKeditor)
MovableTypeにFCKeditorを組み込む
Tutorial: WYSIWYG under Movable Type 3.x