世界中の１％の人々へ

ちょっと、開発を一休みして、FCKeditorを組んでみたいと思う方も多いと思うので、
以前からの約束通りMovable Type1への組方を紹介する。

◆そもそもFCKeditorとは何か？

Movable Typeで利用できる、高機能なWYSIWYGエディター。

まずは下記の編集画面をご覧いただきたい。

▲正しく組み込まれるとエントリーメニューの編集機能は上記に替わる。

長所：

1. 現在Movable Typeに組み込めるWYSIWYGエディターの中で、もっとも高機能
2. 同様に高機能なHTMLArea3.0rc-1に比べ動作は軽快
3. カスタマイズ性にすぐれている
4. 標準でマルチバイト環境に対応している
5. 書き出すHTMLがきれい

短所：

1. 初心者や英語に不慣れな人には組込が難しい。
2. 多機能すぎて使い方がわかりづらい。

＃日本語のサイトでも、いくつか組み方が紹介されているが、これらを読んで組み込める方は少ないだろう。

何ができるかはデモサイトがあるので、あれこれと実際の利用を想定して検証していただきたい。

http://www.fckeditor.net/demo/default.html

※Sample０２: MultiLangage supportを選択すれば、日本語版になる。

上記デモサイトを利用して、機能に感動した方や、感心を持った方だけ、組込にトライしてみよう。

◆組込

組込は下記サイトを参照した。http://weblog.leidenuniv.nl/users/klaassenplf/archives/2005/06/10/tutorial_wysiwyg_under_movable_type_3x.html

1. 下記よりFCKeditor 2.2をダウンロード
   http://www.fckeditor.net/whatsnew/default.html
2. mt.cgiのあるディレクトリへFCKeditorの全てをアップロード
   （ディレクトリ名をFCKeditorとする）
3. fckconfig.jsをダウンロードし、75行目から89行目を以下の内容に書き換える。
   FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['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','Smiley','SpecialChar','PageBreak','UniversalKey'],
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['About']
   ] ;
   FCKConfig.ToolbarSets["MTExcerpt"] = [
    ['Source'],
    ['Bold','Italic','Underline','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
   ] ;
   
4. fckconfig.jsの122行目を書き換える。
   FCKConfig.LinkBrowser = ture ;  →　FCKConfig.LinkBrowser = false ;
   
5. fckconfig.jsの133行目を書き換える。
   FCKConfig.ImageBrowser = ture ;  →　FCKConfig.ImageBrowser = false ;
6. fckconfig.jsのパーミッションを書き込み可にして、アップロード
7. tmpl/cms/header.tmplをコピーしてダウンロード し、header_edit_entry.tmplとリネームして保存
8. header_edit_entry.tmplの17行目から以下の内容を追加して入れ替える。
      <script type="text/javascript"
         xsrc="../../FCKeditor/fckeditor.js"></script>
    
      <script type="text/javascript">
         window.onload = function()
         {
           var oFCKeditor = new FCKeditor( 'text' ) ;
           oFCKeditor.BasePath = '../../FCKeditor/' ;
           oFCKeditor.Width = 580 ;
           oFCKeditor.Height = 400 ;
           oFCKeditor.CheckBrowser = true ;
           oFCKeditor.ReplaceTextarea() ;
           pFCKeditor = new FCKeditor( 'text_more' ) ;
           pFCKeditor.BasePath = '../../FCKeditor/' ;
           pFCKeditor.Width = 580 ;
           pFCKeditor.Height = 400 ;
           pFCKeditor.CheckBrowser = true ;
           pFCKeditor.ReplaceTextarea() ;
              
           qFCKeditor = new FCKeditor( 'excerpt' ) ;
           qFCKeditor.BasePath = '../../FCKeditor/' ;
           qFCKeditor.ToolbarSet = "MTExcerpt" ;
           qFCKeditor.Width = 580 ;
           qFCKeditor.Height = 200 ;
           qFCKeditor.CheckBrowser = true ;
           qFCKeditor.ReplaceTextarea() ;
         }
       </script>
   
9. tmpl/cms/edit_entry.tmplをコピーしてダウンロードし、１行目を
   <TMPL_INCLUDE NAME="header_edit_entry.tmpl">
   と書き換える
10. edit_entry.tmplから
    <script type="text/javascript">
    <!--
    if (canFormat) {
        with (document) {
            write('<a title="<MT_TRANS phrase="Bold" escape="singlequotes">
    [...]
        }
    }
    // -->
    </script>
    を２種類削除する。
    

以上だ。

※ご覧のようにちょっと組込は面倒なので、くれぐれもバックアップは忘れないように…。
※なお、動かないからといって質問に答えられるほど私は詳しくないし、上記も誤りがないとは限らない。
※あくまでも、私はこうやって組み込んだという参考にすぎない。

◆機能の一部

▲文字の大きさの編集機能

▲文字色編集機能

▲表の作成機能

▲画像の挿入機能

他にお勧めの機能としては、Wordファイルの貼り付け機能。
Wordの文字情報を削除してHTML化してくれる。

書き出すHTMLも、３種類のエディターの中では一番きれいだし、
コード編集画面との切り替えも容易。

Movable Type等のハッキングに自信があり、マシン環境が整った方（Win XPでCPU：P4 1MB以上、メモリ1024MB以上、推奨）は一度、組込にトライしてみていただきたい。
＃FCKediterでぐぐると、カスタマイズの楽しさに取り憑かれた方々のレポートが出てくる…ｗ

◆独り言

と、高機能なFCKediterなのだが、２つの理由で私は業務上の採用を見送った。

1. 組込が面倒、イストールするだけですぐ使えるプラグインが、やっぱり楽。
2. 多機能すぎて使い方がわかりづらい。人というものは機能が多くあれば、使いたがるものだ。 FCKの使用マニュアルを書くだけで本１冊書けそうだ…:-p

但し、個人で使用するには、申し分のない機能を持っているので、自信のある方はどんどん使ってみてほしいと思う。

何度も書くが、FCK組み方、使い方の質問は受けつけられない。
なぜなら、私は四苦八苦して組んだので、質問に答えられるだけ詳しくないから…:-p

あなたの健闘を祈る。

2006年3月20日追記： TinyMCE Plugin for Movable Type Ja Beta5リリース。
詳しくは下記頁をご覧いただきたい。
http://www.dakiny.com/archives/movable_type/tinymce_plugin_beta5/

投稿者: Dakiny 日時: 2006年1月 7日 01:48 |   |   |   | パーマリンク | コメント(0)  | トラックバック (3)

トラックバック

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

この一覧は、次のエントリーを参照しています: 今日の研究：Movable TypeへFCKeditor2.2（WYSIWYGエディター）を組込む: