世界中の１％の人々へ

MT4.1でFCKeditorを使えば、Web制作者もWeb管理者も幸せになれる

1月17日にMovable Type 4.1 Commercial RC1がリリースされ、正規版リリースも近い。MT4.1はWeb制作者にとって魅力的なシステムだが、FCKeditorを組み込めば、カスタマイズ方法にもよるが、Dremaweaverのようにブログページをガシガシ作るこも可能だ。そこで、今日はFCKeditorのカスタム方法を紹介したい。ここに書いてあることを理解すれば、FCKeditorはあなたにとって強力な武器となるだろう。

1. インストール方法

Movable Type.org > Plugin Directory > FCKeditorのページを開き、[DOWNLOAD]をクリック。

ダウンーロードしたMT-Plugin-FCKeditor-1.2.tar.gzを解凍すると下記のようになる。 

中身の、 mt-static, pluginsをそれぞれ設置した場所に上書きする。３つのファイルはテキストファイルなのでアップロードする必要はない。

プラグイン一覧を見ると、FCKeditorが追加されているのがわかる。でも、これだけでは動かない。

Documentationを読むと「FCKeditorプラグインを使用できるように、ｍｔ-config.cgiに以下の１行を加えてください」と書いてある

mt-config.cgi (add this line)
----8<----cut----8<----
RichTextEditor FCKeditor
----8<----cut----8<----

要は、ｍｔ-config.cgiにRichTextEditor FCKeditorを追加するだけ。

CGIPath        /mt4_1b1/mt4/
StaticWebPath  /mt4_1b1/mt4/mt-static/
StaticFilePath C:\xampp\htdocs\mt4_1rc1\mt4\mt-static
RichTextEditor FCKeditor

これで完了。新規にブログページやウェブページの作成を開いてみよう。

上記のようにリッチテキストエディタがFCKeditorに変更された。まずは簡単に使ってみることをおすすめしたい。

なお、MT 4.1RC1は、僕の環境では保存ができたが、MT4.1B2の時点では保存ができなかった。

先に自動保存が効いて保存できない人は、のタイミングの問題なので、ｍｔ-config.cgiに、AutoSaveFrequency 30とでも追記して、自動保存間隔を長くしてやるといい。
※公式マニュアルに細かい設定方法がある。

それでもダメな人は、自動保存間隔を抑止するといいだろう。やり方は過去ログにある。
今日のMovable Type 4： Movable Type 4.1 ベータ 2 でFCKeditorを使えるようにするハック

2. フル機能を使うための、簡単なカスタマイズ方法

FCKeditorは本来の姿は、上記画面のように、ずっと多機能である。すべての機能を使いたい方は下記の方法でハックしてほしい。

mt-static/plugins/FCKeditor/js/fck_editor.jsを開き、
8行目ToolbarSet: "MTDefault",を
ToolbarSet: "Default",に変更して保存すれば上記画像のフル機能が利用可だ。

FCKeditorを知るためにも、一度フル機能を使ってみることをお勧めする。

3. 細かいカスタマイズ方法

FCKeditorは本来HTMLを生成するためのエディタであるから、エントリーを生成するには不要な機能が多すぎるから、ここでは例として、ある程度レイアウトになれた人向けにカスタマイズしてみた。

mt-static/plugins/FCKeditor/fckeditor/fckconfig.jsの97行目以降がボタンの設定になっているのでここを編集する。

以下はカスタマイズの例、"MTDefault"を元に[テーブルの挿入/編集][上付文字][下付文字][特殊文字挿入][フォーマット][書体][文字サイズ]を追加し、並び替えてみた。
※セット名は任意でかまわない。

FCKConfig.ToolbarSets["MTDefault2"] = [
['Source','-','Undo','Redo','-','SelectAll','RemoveFormat'],
['Image','Flash','Table'],
['Link','Unlink'],
['FitWindow'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript','-','Smiley','SpecialChar'],    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['TextColor','BGColor'],        ['FontFormat','FontName','FontSize'],
] ;

カスタマイズされたボタンセットは下記。赤で囲われたボタンが追加した部分だ。

1. テーブルの挿入/編集
2. 上付文字、下付文字
3. 特殊文字の挿入
4. フォーマット、書体指定、書体サイズ

これでボタン配置はできた。

4. スクロールメニューのカスタマイズ例

スクロールメニューの内容の変更をおこなうには、オリジナルファイルの161行目に以下の記述を書き換える。名前はそのまま<style>で反映されるから、日本語で名前をつけてはいけない。

FCKConfig.FontFormats    = 'p;div;pre;address;h1;h2;h3;h4;h5;h6' ;
FCKConfig.FontNames        = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontSizes        = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

変更したのは

1. フォーマットからH1、H2の削除
2. 書体指定にMSゴシック、MS Pゴシック、MS明朝、MS P明朝を追加
3. 文字指定サイズを%に変更

FCKConfig.FontFormats    = 'p;div;pre;address;h3;h4;h5;h6' ;
FCKConfig.FontNames        = 'MS Gothic;MS PGothic;MS Mincho;MS PMincho;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontSizes        = '80%;90%;100%;120%;130%;150%;200%' ;

上記のように修正して保存すれば完了。

フォーマットから見出し3以下しか選べないようになった。

MSゴシック等の日本語フォントが指定できるようになった。 

文字サイズが%で指定できるようになった。

5. 正しい書式入力するためのカスタマイズ

さて、このFCKeditor、残念なことに文字を選択して[B]ボタンをクリックすると、文字<strong></storong>で囲われるべきところを<b></b>で囲われる。気になる人は正しいXHTMLが入力できるようカスタマイズしよう。

下記は、オリジナルファイルの213行目。赤字が問題箇所。

    // Basic Inline Styles.
    'Bold'            : { Element :'b', Overrides : 'strong' },
    'Italic'        : { Element :'i', Overrides : 'em' },
    'Underline'        : { Element : 'u' },
    'StrikeThrough'    : { Element :'strike'},
    'Subscript'        : { Element : 'sub' },
    'Superscript'    : { Element : 'sup' },

赤字の部分を、下記のように書き換えればOK。
※delは、そのままでは赤字で表示されるので、CSSで色を変更するとよい。

    // Basic Inline Styles.
    'Bold'            : { Element :'strong'},
    'Italic'        : { Element :'em'},
    'Underline'        : { Element : 'u' },
    'StrikeThrough'    : { Element :'del'},
    'Subscript'        : { Element : 'sub' },
    'Superscript'    : { Element : 'sup' },

保存すれば、正しいXHTMLの書式が入力されるようになる。

後は自分流にカスタマイズしてみるといいだろう。

参考になれば、幸い。

投稿者: Dakiny 日時: 2008年1月22日 05:47 |    |   |    |   |  パーマリンク | コメント(2)  | トラックバック (5)

トラックバック

このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1130
※文章内容と関係のないトラックバックは固くお断り。

この一覧は、次のエントリーを参照しています: 今日のMovable Type 4： Movable Type 4.1RC1でFCKeditorをカスタマイズして使うハック: