欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Django集成富文本编辑器summernote的实现步骤

程序员文章站 2022-04-01 08:05:01
提到django的富文本编辑器,大家一定会想到ckeditor和tinymce。其实还是有一个富文本编辑器同样优秀,它就是summernote,个人认为功能上不逊于ckeditor,比tinymce更...

提到django的富文本编辑器,大家一定会想到ckeditor和tinymce。其实还是有一个富文本编辑器同样优秀,它就是summernote,个人认为功能上不逊于ckeditor,比tinymce更强大。summernote 是一个简单灵活的所见即所得的 html 富文本编辑器,基于 jquery 和 bootstrap 构建,支持图片上传,提供了大量可定制的选项。

展示效果如下所示:

Django集成富文本编辑器summernote的实现步骤

第一步 安装django-summernote

首先通过pip安装django-summernote,建议安装在django项目所在的虚拟环境里。如果你要上传图片,还需要安装pillow这个图片库。

pip install django-summernote
pip install pillow # 上传图片时需要

接着将其加入到installed_apps里去,如下所示:

installed_apps = [
    ...
    'django_summernote', # 注意下划线
]

然后将django_summernote.urls 加入到项目的 urls.py

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

如果你需要上传图片,还需要在settings.py中设置media相关选项,如下所示。如果你django的版本是3.x的,你还需设置x_frame_options选项。

media_url = '/media/'
media_root = os.path.join(base_dir, 'media/')

# django 3.x用户还需增加如下配置
x_frame_options = 'sameorigin'

如果你在本地开发测试环境debug=true, 你还需要使用django自带static静态文件服务器才能正确显示上传的图片。修改项目的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)

展示效果如下所示:

Django集成富文本编辑器summernote的实现步骤

表单中使用

如果你使用普通表单,只需要设置富文本显示字段的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())

如果你使用modelform, 可以通过如下方式设置widget。

class postform(forms.modelform):
    class meta:
        model = post
        widgets = {
            'content': summernotewidget(),
        }

注意:通过表单提交的内容都是带html标签的,需正确显示文本,需要使用safe模板标签。

{{ content|safe }}
由于summernotewidget对用户提交的数据不做任何转义,所以存在外部用户通过表单注入恶意脚本的风险,小编并不建议使用。在表单中使用django-summernote更好的方式是使用summernotetextformfield和summernotetextfield,它们会对所有有害的标签进行转义。使用方式如下所示:

第三步 测试效果

djangos-summernote不仅可以上传图片,还可以嵌入视频哦,亲测成功!

Django集成富文本编辑器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的资料请关注其它相关文章!