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

更新时间：2021年05月31日 16:17:39 作者：大江狗

在最近的项目中小编使用了这个富文本编辑器，选择它的主要原因是配置非常简单，默认支持普通用户上传图片(不像ckeditor默认只有staff user才能上传图片。如果要让普通用户上传图片，还需修改源码装饰器)。现在让我们来看看如何使用这个富文本编辑器

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

展示效果如下所示：

第一步安装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)

展示效果如下所示：

表单中使用

如果你使用普通表单，只需要设置富文本显示字段的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不仅可以上传图片，还可以嵌入视频哦，亲测成功！

第四步常规配置

常用设置选项如下所示，可以满足大部分项目需求，可以直接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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Java编程迭代地删除文件夹及其下的所有文件实例
这篇文章主要介绍了Java编程迭代地删除文件夹及其下的所有文件实例，分享了相关代码示例，小编觉得还是挺不错的，具有一定借鉴价值，需要的朋友可以参考下
2018-02-02
pytorch下tensorboard的使用程序示例
我们都知道tensorflow框架可以使用tensorboard这一高级的可视化的工具，这篇文章主要介绍了pytorch下tensorboard的使用,需要的朋友可以参考下
2021-10-10
python实现登录与注册系统
这篇文章主要为大家详细介绍了python实现登录与注册系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
浅析python中的set类型
这篇文章主要介绍了python中的set类型,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
python统计文本文件内单词数量的方法
这篇文章主要介绍了python统计文本文件内单词数量的方法,涉及Python针对文本文件及字符串的相关操作技巧,需要的朋友可以参考下
2015-05-05
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
今天小编就为大家分享一篇关于啥是佩奇?使用Python自动绘画小猪佩奇的代码实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
使用Python的matplotlib库绘制柱状图
这篇文章主要介绍了使用Python的matplotlib库绘制柱状图,Matplotlib是Python中最常用的可视化工具之一，可以非常方便地创建海量类型地2D图表和一些基本的3D图表，可根据数据集自行定义x,y轴，绘制图形,需要的朋友可以参考下
2023-07-07
python 泛型函数--singledispatch的使用解读
这篇文章主要介绍了python 泛型函数--singledispatch的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
python 将字符串转换成字典dict的各种方式总结
下面小编就为大家分享一篇python 将字符串转换成字典dict的各种方式总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
基于tensorflow __init__、build 和call的使用小结
这篇文章主要介绍了基于tensorflow __init__、build 和call的使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-02-02