Agile育成ブログ
未来を変える喜びを
Django

django-summernote


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

SummernoteをDjangoで簡単に実装できるようにしたツールがdjango-summernoteです。

実装環境

下記ブログで作成したDjangoブログにsummernoteを実装していきます。

https://www.agile-software.site/2021/04/11/django%e8%a8%ad%e5%ae%9a/

django-summernoteのインストール

pip3 install django-summernote
pipのアップグレード
pip install --upgrade pip
Djangoのアップグレード
pip install --upgrade django

settings.pyに追記

INSTALLED_APPSに’django_summernote’を追加して、X_FRAME_OPTIONS = “SAMEORIGIN”も

INSTALLED_APPS = [
    'blog.apps.BlogConfig',   # アプリ
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_summernote',    # 追記
]

X_FRAME_OPTIONS = "SAMEORIGIN"   # 追記

urls.pyに追記

urlpatterns = [
    path('admin/', admin.site.urls),
    path('summernote/', include('django_summernote.urls')),   # 追記
]

admin.pyに追記

from django.contrib import admin
from .models import Post, Category
from django_summernote.admin import SummernoteModelAdmin

class PostAdmin(SummernoteModelAdmin):
    summernote_fields = '__all__'


admin.site.register(Post,PostAdmin)
admin.site.register(Category)

マイグレーション

python3 manage.py migrate

ソースコードを文章化する

このままだと文章を作成した時にHTMLのコードで表示されてしまいます。
それを防ぐためにpost_data.contentをsafeにします。

<p>{{ post_data.content|safe }}</p>

You cannot copy content of this page