FCKeditor のサーバーブラウザーをRailsで書く。

Tips

必要だったので書きました。

fckconfig.js の設定

まずは、fckconfig.js に、サーバーブラウザーのURLを教えます。

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = "/fck/index";
FCKConfig.LinkBrowserWindowWidth        = 600;
FCKConfig.LinkBrowserWindowHeight       = 600;
FCKConfig.LinkUpload    = true ;
FCKConfig.LinkUploadURL = '/fck/quick_upload'

こんな感じで。

fck_controller.rb の実装

あとは単に/fck/index でアクセスされるところを実装すればいいだけなのですが。ファイルアップロードをAjaxで行うためにresponds_to_parentプラグインを使っています。これだとiframeにポストして、親側でJavaScriptを動かすのが楽に。

class FckController < ApplicationController
  def index   # fck dialog (通常のリンク)から呼び出される
    set_files
  end

  def image   # fck dialog (画像リンク)から呼び出される
    set_files
    render :action => "index"
  end

  def browse  # ファイルリストを更新する(ajaxで呼び出される)
    set_files
    render :partial => "files"
  end

  def upload  # ブラウザ上でアップロードする
    save_file(:new_file)
    @script ||= "$('new_file').value = ''; Browse();"   # 成功したらクライアントのBrowse()を呼び出して、ファイルリストを更新。
    responds_to_parent do
      render :update do |html|
        html << @script
      end
    end
  end

  def quick_upload # fck dialog から呼び出されるアップローダー
    begin
      save_file("NewFile")
    rescue WebJourney::ApplicationError => e
      @script = <<-EOS
<script type="text/javascript">
window.parent.OnUploadCompleted(1, null, null, "#{e.message}");
</script>
EOS
      render :text => @script
    end
  end
quick_uplaod アクション ?

これははブラウザを開かずにdialog上でファイルをアップロードするときに呼び出されます。これだけ特殊なのでメモを残しておくと、NewFileという名前のパラメーターでFCKのダイアログからファイルをアップロードするときに呼び出されます。レスポンスのHTMLは、JavaScriptのみを記述します。

<script type="text/javascript">
<!--//
window.parent.OnUploadCompleted(0, '<%=h @file.image_src_path %>', '<%=h @file.name %>', null);
<% end %>
//-->
</script>

こんな感じで、window.parent.OnUploadCompleted(error, url, filename, message) を呼び出すように記述するとよいでしょう。

  • error : 0 であれば成功。1 であれば、message がalertによって呼び出されます。それ以外にはFCKの方で201などが予約されています。
  • url : リンクするURL
  • filename : なんだっけ。

quickuploadのレスポンスについては、http://wiki.fckeditor.net/Developer%27s_Guide/Participating/Server_Side_Integration#Upload が詳しいです。

このページには、Xmlレスポンスで実装する"行儀のよい"やり方(UI部分はFCKのjavascriptが担保してくれる)がかかれているのですが、この方法だとイメージがサムネイルで表示されないので、何のためのサーバーブラウザーか、ということになりかねなくて、断念しました。サムネイルするやつはお金を取るみたいですし。

実装コード(Controller, View)はSVN上においてます。ファイルシステムではなくてデータベースにバイナリをつっこんでいるので、あまりよろしくないかも。