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的pycurl模块
Apr 07 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
Apr 21 Python
详解python中的装饰器
Jul 10 Python
PyQtGraph在pyqt中的应用及安装过程
Aug 04 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
Sep 23 Python
Python 使用元类type创建类对象常见应用详解
Oct 17 Python
Python Web静态服务器非堵塞模式实现方法示例
Nov 21 Python
布隆过滤器的概述及Python实现方法
Dec 08 Python
pytorch 实现删除tensor中的指定行列
Jan 13 Python
opencv 图像腐蚀和图像膨胀的实现
Jul 07 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
Dec 07 Python
python自动计算图像数据集的RGB均值
Jun 18 Python
Python基础知识学习之类的继承
May 31 #Python
Django实现聊天机器人
Python趣味挑战之教你用pygame画进度条
Python趣味挑战之用pygame实现简单的金币旋转效果
May 31 #Python
解决pytorch读取自制数据集出现过的问题
Python爬虫基础初探selenium
只用40行Python代码就能写出pdf转word小工具
You might like
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP分享图片的生成方法
2018/04/25 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python如何计算语句执行时间
2019/11/22 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python代码中怎么换行
2020/06/17 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
医学生职业规划范文
2014/01/05 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
出国签证在职证明范本
2014/11/24 职场文书
个人催款函范文
2015/06/23 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
用Python生成会跳舞的美女
2022/01/18 Python