Django統合リッチテキストエディタsummernoteの実現手順

6008 ワード

django リッチテキストエディタサマーノテ

Djangoのリッチテキストエディタといえば、皆さんは必ずKeditorとtinyMCEを思い出します。実際には、同じように、リッチテキストエディタがあります。これはsummernoteです。個人的には、機能はKeditorに負けないと思います。tinyMCEよりも強いです。サマーノート簡単で柔軟なHTMLリッチテキストエディタであり、jQueryとBootstrapに基づいて構築され、画像のアップロードをサポートし、多くのカスタマイズ可能なオプションを提供しています。
展示効果は以下の通りです。

第一歩はdjango-summernoteをインストールします。
まずpipを通じてdjango-summernoteをインストールして、Djangoプロジェクトのある仮想環境にインストールすることを提案します。画像をアップロードするには、ピジョンというギャラリーをインストールする必要があります。


pip install django-summernote
pip install pillow #

続いてINSTALLEDに加入します。APPSに行くと、次のようになります。


INSTALLED_APPS = [
    ...
    'django_summernote', #      
]

そしてdjango_をサマーノテ.urls プロジェクトに参加する urls.py


from django.urls import include
# ...
urlpatterns = [
    ...
    path('summernote/', include('django_summernote.urls')),
    ...
]

写真をアップロードする必要がある場合は、以下のようにSETTings.pyにMEDIA関連のオプションを設定する必要があります。もしあなたがDjangoのバージョンが3.xなら、まだX_を設定してください。FRAMEOPTIONSオプションです。


MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

# Django 3.X          
X_FRAME_OPTIONS = 'SAMEORIGIN'

ローカルでテスト環境debug=Trueを開発する場合は、djangoを使ってスタティックファイルサーバを持参してこそ、アップロードされた画像を正しく表示することができます。プロジェクトのurls.pyを修正し、下記のコードを追加します。


from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

第二ステップはdjango-summernoteを使用します。
Djangoの管理バックグラウンドadminにdjango-summernoteを使ってもいいです。自分のフォームにdjango-summernoteを使ってもいいです。
adminで使用する


from django_summernote.admin import SummernoteModelAdmin
from .models import Post

class PostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content',)

admin.site.register(Post, PostAdmin)

展示効果は以下の通りです。

フォームで使用
普通のフォームを使うなら、リッチテキスト表示フィールドのwidgetを設定すればいいです。


from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget

# Apply summernote to specific fields.
class PostForm(forms.Form):
    content = forms.CharField(widget=SummernoteWidget())  # instead of forms.Textarea

#       django-crispy-forms,    
class PostForm(forms.Form):
    content = forms.CharField(widget=SummernoteInplaceWidget())

Model Formを使うと、次のようにwidgetを設定できます。


class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        widgets = {
            'content': SummernoteWidget(),
        }

注意：フォームを通して提出された内容は全部htmlラベル付きです。テキストを正しく表示するためには、safeテンプレートのラベルが必要です。
{content𞓜safe}
SummernoteWidgetはユーザーから提出されたデータに対しては一切転送しないため、外部のユーザーがフォームを通して悪意のあるスクリプトを注入するリスクがあります。フォームの中でdjango-summernoteを使うほうがいい方法はSummernoteTextFormFieldとSummernoteTextFieldを使って、それらはすべての有害なラベルを意味します。使用方法は以下の通りです。
第三段階テストの効果
Djangos-summernoteは画像をアップロードするだけではなく、ビデオを埋め込むこともできます。

第四歩全般設定
一般的な設定オプションは以下の通りです。ほとんどの項目のニーズを満たすことができます。直接的にcopyで使用できます。


SUMMERNOTE_CONFIG = {
    'iframe': True,
    #         Bootstrap/jQuery  
    # 'iframe': False,
    'summernote': {
        # As an example, using Summernote Air-mode
        'airMode': False,
        
        #      size
        'width': '100%',
        'height': '450',

        #     
        'lang': None,

        #      
        # https://summernote.org/deep-dive/#custom-toolbar-popover
        'toolbar': [
            ['style', ['style',]],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['redo', 'undo', 'fullscreen', 'codeview',]],
        ],
    },

    #            .
    'attachment_require_authentication': True,

    # Set `upload_to` function for attachments.
    # 'attachment_upload_to': my_custom_upload_to_func(),

    # Set custom storage class for attachments.
    # 'attachment_storage_class': 'my.custom.storage.class.name',
    
    # You can completely disable the attachment feature.
    'disable_attachment': False,
    
    # Set to `True` to return attachment paths in absolute URIs.
    'attachment_absolute_uri': False,
    
    # test_func in summernote upload view. (Allow upload images only when user passes the test)
    # https://docs.djangoproject.com/en/2.2/topics/auth/default/#django.contrib.auth.mixins.UserPassesTestMixin
    # ```
    # def example_test_func(request):
    #     return request.user.groups.filter(name='group_name').exists()
    # ```
    # 'test_func_upload_view': example_test_func,
    
    #    
    'lazy': True,
}

以上がDjango統合リッチテキストエディタsummernoteの実装手順の詳細です。Django統合リッチテキストエディタsummernoteに関する資料は他の関連記事に注目してください。