Djangoで管理画面のテキストエリアをテキストエディッタにしたい時にはdjango-cheditorがおすすめ

スポンサーリンク
Pocket
LINEで送る

ブログやメディアなどで、記事を装飾するにはテキストエディッタが必要になります。

html手打ちでもいいかもしれませんが、それだと効率が悪くなるし、書き手にhtmlのスキルが求められてしまう。

今回はDjangoプロジェクトの管理画面でテキストエディッタを作るライブラリdjango-cheditorの使い方を紹介します。

 

Django-ckeditorの使い方

Djangoは管理画面のフォームは自動で吐き出してくれて便利ですが、テキストエディッタを導入したい時は自前でtemplateファイルを上書きしてカスタマイズする必要があり手間がかかります。

django-ckeditorを使えば簡単に特定のフォームに対しツールバーを用意してくれます。

https://github.com/django-ckeditor/django-ckeditor

 

インストール

まずは、インストール

pip install django-ckeditor

 

設定

では、テキストエディッタの設定をしていきます。

setting.pyのINSTALLED_APPSにckeditorを追加します。

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'articles',
   'ckeditor'
]

 

ckeditorに必要なファイルを展開します。

python manage.py collectstatic

 

次に以下をadmin/base_site.htmlに追加

{% extends "admin/base_site.html" %}

{% block extrahead %}
<script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';</script>
{{ block.super }}
{% endblock %}

ckeditorは自動でjsファイルを検知してくれますが、ビルドツールを使っているときのためなどに明示的に宣言しておく必要があります。

これで設定は完了です。

 

適用させたいフォームに設定する

formクラス内で適用させたいフォームにwidget=CKEditorWidget()を追加します。

content = forms.CharField(widget=CKEditorWidget())

スポンサーリンク

これでこのようにフォームの上にツールバーが出てきます。

 

setting.pyにckeditorのコンフィグを書いておくとツールバーをカスタマイズすることができます

CKEDITOR_CONFIGS = {
   'default': {
     'toolbar': 'full',
     'height': 300,
   },
}

 

以上、Djangoでテキストエディッタを導入する方法でした。

実際管理画面は運用者しか使わないのでここらへんはOSSでさくっと作った方が楽ですね。