投稿フォームとかの類で wysiwyg な操作で HTML を入力できますよー，っていう， 似たようなのだと TinyMCE とか色々あって， こいつは FCKEditor というのが前身で，それの Ver.3 が CKEditor として開発されましたってことらしい．
ちなみに FCK とか CK って何ぞ． と思って調べたら作者の名前が Frederico Caldeira Knabben でした． なるほど把握．なんで F が取れたのかまでは追ってないので，そのうち調べてみよう．
で，これ自身はクライアント側で動く <textarea> タグの拡張品で， 最終的には普通のテキスト（HTML）が出来上がるものなんだけど， HTML といえば当然，画像も入れないといけません．
今でこそ HTML の中に画像を埋め込んだりとかも出来るけど， 基本的には画像は HTML とは異なるデータとしてサーバに置いてあって， そこへのポインタを HTML 内に書くもの．
ということは CKEditor もクライアント側だけでは話が完結せず， サーバ側と連携を取らないとどうにもならないわけだ．
で，この CKEditor はその画像関係のサーバ側とのやりとりが API 化されていて， それに従ってサーバ側に存在する画像の一覧から選択したりするプログラムを書けば， ローカルの快適な操作感を崩さずに画像の操作を行なえる．
そのサーバ側で動くコードが CKFinder という名で提供されていて， まぁ普通に考えれば「これとセットで使いましょう」なんだけど．
しかしこの CKFinder の方は，普通に仕事で作るサイトで使おうとすると， どうしても有料になってしまうのであります．
めっさ暴利でぼったくりってわけじゃないんだけど，ていうかむしろ大して高くないんだけど まぁ予算に組み込むとかの処理は地味に面倒なので，微妙に使いづらい．
というわけで，CKFinder ほどじゃないけど画像ブラウザを自作します．
なんか前置きが長いのはいつもの事だが内容が短いのもいつもの事で．
まずは公式ドキュメントを参照しつつ，サーバ画像ブラウザを．
- textarea を CK 化させる時のオプションに，「filebrowserBrowseUrl」とかを書いてやると，画像ブラウザを呼び出す機能が有効化される．
- filebrowserBrowseUrl の方は，その URL がパラメタ（後述）付きでコールされる．
- filebrowserUploadUrl の方は，その URL にパラメタ（後述）を付けた URL に対して，「upload」というフィールド名でファイルが POST される．
ここまではいい．次こっちのページ．「パラメタ」について書いてある．
- 複数のパラメタが付いてくるけどひとまず重要なのは「CKEditorFuncNum」．
- サーバブラウザは任意の方法でユーザに画像を選択させたら，その画像を示す URL を CKEditor に返してやる必要がある．
- CKEditor に URL を返す方法は：
window.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, URL );
この JavaScript 関数コールを，サーバブラウザ側のウィンドウで実行してやる． すると，呼び出し側の画像ダイアログに，その URL が入る．わーい．
そして次は画像アップロード処理．これが画像ブラウザと微妙に違う処理が必要でわかりにくい．stackoverflow.comのここも参照する．
- 上述の通り，パラメタ付き URL にファイルが POST されてくる．
- サーバ側コードは，ファイルを処理して，OK ならそのファイル（画像）の URL を，エラーならエラーメッセージを生成する．
- サーバは下記の内容を持つ HTML をレスポンスすること．
その HTML とは：
<html>
<body>
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(
CKEditorFuncNum,
'(URL)',
'(message)'
);
</script>
</body>
</html>ってな感じ．
サーバ側の処理で，処理が成功した場合は (URL) に URL を，(message) は空に．
逆に処理が失敗した場合は (URL) を空に，(message) にエラーメッセージを．
と，まぁ，こんな感じだった．
自作サーバブラウザなら，デザインとか機能（多すぎて困る場合がほとんどだがｗ）も顧客に合わせて色々と出来ていい感じです．
さーまだ仕事あるぞー．がんばろー．