ホームページ 制作 東京

Movable Typeのエントリー編集画面でWYSIWYGエディタを使えるように改造する方法です。

(1) FCKeditorをダウンロード http://www.fckeditor.net/

(2) 解凍したフォルダ(FCKeditor)をmt.cgiが入っているフォルダへコピー

(3) MovableTypeのテンプレートファイルを修正

tmpl/cms/edit_entry.tmpl を編集します。

3行目
<div id="edit-entry">
の下あたりに下記のようにコードを追加（path-to-fckeditorは環境に合わせて修正）

<script type="text/javascript" src="/path-to-fckeditor/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    //初期化
    var fck = new FCKeditor("text");
    fck.BasePath = "/path-to-fckeditor/FCKeditor/";

    //後で使うカスタマイズ用設定ファイルのパス    
    fck.Config["CustomConfigurationsPath"] = fck.BasePath + "myconfig.js";
    
    //高さを増やす
    fck.Height = 400;

    //textareaタグと置換
    fck.ReplaceTextarea();
}
</script>


必要がなければデフォルトのテキスト装飾用ボタンを消す
if (canFormat) {
    with (document) {
        write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return ・・・
となっているところを、
if (canFormat && false) {
などとして、ツールバーを消す。

★まずここまでの設定で、エントリーの編集画面に入り、WYSIWYGエディタが表示されることを確認

(4) アップローダ、ファイルブラウザの設定

※FCKeditorはASP,Perl,PHPなど各種スクリプトで処理できる仕様になっているが、ここではPHPの場合で解説
※以下の方法ではブログ別にアップロード先を変えるなどの設定はできない

■アップローダの設定
FCKeditor / editor / filemanager / upload / php / config.php を編集
2箇所、設定を変更する。

$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/path-to/upload/';
//↓Type別にアップロードするディレクトリを切り替えるための設定
if ( isset($_GET['Type']) ) $Config['UserFilesPath'] .= $_GET['Type'] . "/";

■ファイルブラウザの設定
FCKeditor \ editor \ filemanager \ browser \ default \ connectors \ php \ config.php を編集
2箇所の設定を修正
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/path-to/upload/' ;

■フォルダ作成
実際のアップロード先ディレクトリの中にImage, Flash, File, Mediaという名前でフォルダを作りパーミッションを777に変更

(5) カスタマイズ用設定ファイルの修正

アップローダ、ファイルブラウザへのパス設定
サンプルを参考に、アップローダ・ファイルブラウザをPHPで動かすように設定

FCKConfig.LinkBrowserURL = "〜"　と書いてあるあたり以下を編集

その他、必要であれば色々カスタマイズを施す