2008年5月| 1 2 3 4567 8 91011121314 15 16171819202122232425262728293031
トップ > Movable Type > 今日のMovable Type 4: Movable Type 4.1RC1でFCKeditorをカスタマイズして使うハック

今日のMovable Type 4: Movable Type 4.1RC1でFCKeditorをカスタマイズして使うハック

2008年1月22日 05:47

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

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

1. インストール方法

FCKeditor | Plugin Directory | movabletype.org

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

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

FCKeditor解凍フォルダ

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

MT4.1プラグインディレクトリ

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

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

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

要は、mt-config.cgiRichTextEditor FCKeditorを追加するだけ。

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

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

FCKeditor for MT4.1

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

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

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

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


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

FCKeditor

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'],
] ;

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

FCKeditor

  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%' ;

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

FCKeditor

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

アイコン

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

FCKeditor

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


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 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (2)

トラックバック

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

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

» MT4のエディタをFCKeditorに変更してみる from 気まままさやん
MT4を使い続けて数カ月になりますが、エディタ、いわゆるリッチテキストエディタが... [詳しくはこちら]

トラックバック時刻: 2008年3月18日 00:58

» Movable Type 4 で FCKeditor を使用する from Movable Type 備忘録
こんにちわ^^ いつも参考にさせてもらってる 世界中の1%の人々へ さんとこで、WYSIWYG HTMLエディタとして有名な FCKeditor を、Mo... [詳しくはこちら]

トラックバック時刻: 2008年3月30日 18:57

コメントを投稿

Search


キャッシュ使用
Powered by 暴想

Download

Categories

ArchiveList

Trackbacks

Comments