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


Posted in Python onMay 31, 2021

提到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的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
python使用xauth方式登录饭否网然后发消息
Apr 11 Python
基于Python的身份证号码自动生成程序
Aug 15 Python
python各种语言间时间的转化实现代码
Mar 23 Python
使用python绘制常用的图表
Aug 27 Python
对Python通过pypyodbc访问Access数据库的方法详解
Oct 27 Python
python实现名片管理系统
Nov 29 Python
python实现三次样条插值
Dec 17 Python
浅析Python 中几种字符串格式化方法及其比较
Jul 02 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
Mar 10 Python
基于keras中的回调函数用法说明
Jun 17 Python
python利用paramiko实现交换机巡检的示例
Sep 22 Python
python如何在word中存储本地图片
Apr 07 Python
Python基础知识学习之类的继承
May 31 #Python
Django实现聊天机器人
Python趣味挑战之教你用pygame画进度条
Python趣味挑战之用pygame实现简单的金币旋转效果
May 31 #Python
解决pytorch读取自制数据集出现过的问题
Python爬虫基础初探selenium
只用40行Python代码就能写出pdf转word小工具
You might like
php入门学习知识点三 PHP上传
2011/07/14 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
基于vue实现分页效果
2017/11/06 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python邮件发送smtplib使用详解
2020/06/16 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
历史专业大学生职业生涯规划书
2014/03/13 职场文书
新春寄语大全
2014/04/09 职场文书
医院保洁服务方案
2014/06/11 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
通知格式
2015/04/27 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python