django-fckconnectorを利用して、Djangoの管理画面でFCKeditorを使う方法について紹介します。
使用しているDjangoはSVN版(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で必要のないファイル(phpやaspなどのモジュール)は削除しても大丈夫です。
- 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の初期化用スクリプトを書く
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が有効になっています。
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']