Djangoの管理画面でFCKeditorを使う

django-fckconnectorを利用して、Djangoの管理画面でFCKeditorを使う方法について紹介します。
使用しているDjangoSVN版(rev.6903)です。django-fckconnectorはrev.9です。FCKeditorはver.2.5です。

  • django-fckconnectorのインストール

SVNで、リポジトリからチェックアウトして"python setup.py install"を実行するか、site-packagesにfckeditorディレクトリを作成して、ソースをチェックアウトします。

  • settings.pyの必要な項目を設定する

MEDIA_ROOTとMEDIA_URLはImageBrowserのビューが検索などで使用するので、設定しておく必要があります。
今回は、以下のような設定になっています。(BASE_DIRについてはueblog.org - を参考にしてください。)

MEDIA_ROOT = os.path.join(BASE_DIR, "static/")
MEDIA_URL = '/static/'

INSTALLED_APPSに'fckeditor'を追加します。

  • urls.pyを編集する

ルートのurls.pyでdjango-fckconnectorのURLの設定を行います。

urlpatterns += patterns('',
    (r'^fckeditor_connector/', include('fckeditor.connector.urls')),
)

MEDIA_ROOTディレクトリの下に、"uploads"という名前のディレクトリを作成しておきます。今回は"/static/uploads/"としました。

  • FCKeditorを配置する

FCKeditorをダウンロードして静的ファイルを置くディレクトリ(MEDIA_URL以下のどこか)に配置します。
今回は"/static/js/fckeditor/"に配置しました。FCKeditorで必要のないファイル(phpaspなどのモジュール)は削除しても大丈夫です。

  • fckconfig.jsを修正する

FCKeditorのImageBrowserで使用される画像検索とアップロードのURLを、django-fckconnectorのビューに変更します。
fckeditor/fckconfig.jsの該当する箇所を下記のようにします。

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor_connector/browser/' ;
FCKConfig.ImageUploadURL = '/fckeditor_connector/uploader/';

FCKeditorを初期化して適用するためのスクリプトファイルを作成します。*1今回は、"/static/js/fckeditor_init.js"に作成しました。
"content"という名前のTextFieldに適用させるので、idは"id_content"になります。

window.onload = function()
{
    var oFCKeditor = new FCKeditor('id_content') ; // FCKeditorを適用させるtextareaのID
    oFCKeditor.BasePath = '/static/js/fckeditor/'; // FCKeditorのベースパス
    oFCKeditor.ReplaceTextarea();
}
  • モデルのAdminクラスでjsを設定する

FCKeditorを適用させるモデルのAdminクラスで、jsを設定します。

class Page(models.Model):
    title = models.CharField(u'タイトル', blank=True, max_length=100)
    content = models.TextField(u'内容', blank=False)
    class Admin:
        js = (settings.MEDIA_URL + 'js/fckeditor/fckeditor.js',
              settings.MEDIA_URL + 'js/fckeditor_init.js',
              )

以上で設定は終わりです。管理画面で該当のモデルを編集するときに、FCKeditorが有効になっています。
http://tokibito.orz.hm/static/img/django-fck01.png

FCKeditorの設定はfckconfig.jsに纏められているので、いろいろ試してみると良いでしょう。

  • 12月15日追記(重要)

django-fckconnectorのソースを読んでて気付いたのだが、やっぱりセキュリティ対策がなされていない。このまま使うと誰でもファイルをアップロードできてしまいます。
対策としては、django.contrib.csrf.middleware.CsrfMiddlewareを使用するか、django-fckconnectorのソースでlogin_requiredを適用します。
また、日本語のファイル名でファイルをアップロードしようとすると失敗します。これは、django-fckconnectorのソースを修正することで対応できます。
actions.pyの24行目(ファイルの検索)

#    for f in os.listdir(folder_path):
    for f in os.listdir(unicode(folder_path)):

actions.pyの48行目あたりに追記(ファイルのアップロード)*2

        new_file['filename'] = new_file['filename'].decode('utf-8') # この行を追記
        file_name = new_file['filename']

*1:このスクリプトDjangoに生成させたほうが使いやすいかもしれない。

*2:この部分はDjangoのバグかもしれないので、そのうち修正されるかも?