JAMADAM.COM

今日の成果物。

function FCKeditor_OnComplete(editorInstance) {
    var _FCKeditor_doSave = function (editorInstance) {
        editorInstance.UpdateLinkedField();
    }
    editorInstance.Events.AttachEvent('OnBlur', _FCKeditor_doSave);
}

FCKeditorはtextareaを差し替えてiframeでコンテンツを管理しているので、元のtextareaは頻繁には更新されない(正直、自動的に更新されたのを確認したことがない)。このため、何らかのタイミングでエディタが再表示されると草稿がすべて失われてしまう。例えば、このブログではウィジェットを移動するとエディタの再表示が発生する。原因は未確認。

上記の関数を定義しておけば、エディタがフォーカスを失ったときに自動的にtextareaに反映されるので、内容は保持される。未確認だけど、執筆中に誤ってページ遷移し、ブラウザの履歴で戻った場合でも有効かもしれない。

久々にブログ用に長文書き上げたのにポストする前に消えた。この怒りをどこにぶつけていいのかわからない。とりあえず、このブログの更新ツール(自作)が悪い！FCKeditorが文章を即座にtextareaに反映しないのがいけない。そこでUpdateLinkedFieldメソッドなのです。

フォーム周りもajaxにした。フォーム送信するまでFCKeditorがテキストエリアを更新してくれないので自前で送信できないのかと思ったら、UpdateLinkedFieldっていうメソッドがちゃんと用意されていた。

<form onsubmit='return widget_submit_func1(this)' action='./a.cgi'>
    <textarea id='INSTANCE_ID'></textarea>
</form>

function widget_submit_func1(target) {
    
    FCKeditorAPI.GetInstance('INSTANCE_ID').UpdateLinkedField();
    
    var f = $(target);
    
    $.ajax({
        url: f.attr('action'),
        type: 'POST',
        data: f.serialize(),
        dataType: 'html',
        success: function(data, textStatus) {
            
            f.parents('.widget').addWidget(data, {method: 'insertBefore'});
        }
    });
    
    return false;
}

他にもGetHTMLメソッドとかいろいろあって何でもできる。ちゃんとドキュメント読まんといかんです。

一番ajax化したいフォーム周りが、FCKeditorが邪魔でajax化できない。悩みどころ。

フルAJAXな方向性にしたので、一度の来訪で同じファイルを何度もリクエストされることはあまり無いと思いきや、FCKeditorのテキストエリア用のCSSが何度もリクエストされてた。CSSはCGIで書き出してるため、ブラウザのキャッシュを有効利用できてなかった。Etagってのを発行すればいいだけらしく、簡単そうなので近々やってみよう。

FCK Editorのver2.6.3が出てたのでアップデートした。気づいた変化といえば、たまに突然スクロールするバグが直ったぽいこと。その他はDIVタグの追加機能とか。

あと、Tooltip用に使ってみたjQuery Tooltip pluginの実装がちょっと気に入らなかったので、勉強がてら、改造しまくってみた。Title属性にタグ埋め込むのも気が引けるので、ティップスはAJAXでサーバから取得。あと、好きなイベントハンドラで駆動できるようにした。見た目には変わってないか、寧ろ、動作がぎこちなくなったみたい。

FCKエディタの2.6がリリースされてたので差し替えてみた。チェンジログも見たし、いろいろ見て回ったけど、何が変わったのかわからない。

FCKeditor設置完了！

最初は更新ツールに利用する目的だったんですが、ネタにならないのでコメントフォームにも設置。エディタの設置自体は超簡単なんですが、セキュリティに配慮するのは全てサーバー側の責任。危険なタグを排除するのに苦労しました。

そんな訳で、コメントに利用できるHTMLタグは下記のみ。

br i u sup sub p a b strike s span blockquote ul li ol

FCKeditor。HTMLサンプルの中で、Perl用だけが動かんので対策。

Perlのパスを変える。

#!/usr/bin/perl

GetServerPathサブルーチンで環境変数のPATH_INFOもFILEPATH_INFOも取得できてないのでREQUEST_URIで代用。

sub GetServerPath
{
my $dir;

    if($DefServerPath) {
        $dir = $DefServerPath;
    } else {
        if($ENV{'PATH_INFO'}) {
            $dir  = $ENV{'PATH_INFO'};
        } elsif($ENV{'FILEPATH_INFO'}) {
            $dir  = $ENV{'FILEPATH_INFO'};
        } elsif($ENV{'REQUEST_URI'}) {
            $dir  = $ENV{'REQUEST_URI'};
        }
    }
    return($dir);
}

とりあえず動いた。なんかPerlのサンプルだけやる気なさげなのは気のせいか。

無知っておそろしい。

いい加減、エントリー中のHTMLタグの不整合を正すべく、更新ツールに気の利いたエディタ機能でもつけようと思ったんですが、事前に調査でも・・ってことでネットを徘徊していたら、FCKeditorとかTinyMCEなんていう超すげーエディタの存在を知り、完全にやる気が失せる。

そういう訳で、こいつらをブログに取り込む方向に軌道修正。でも一筋縄では行かなそう。アップロード画像とか一体どうやって受け取ればいいんだ？