经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Django » 查看文章
Django集成富文本编辑器summernote的实现步骤
来源:jb51  时间:2021/5/31 18:23:41  对本文有异议

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

展示效果如下所示:

第一步 安装django-summernote

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

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

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

  1. INSTALLED_APPS = [
  2.     ...
  3. 'django_summernote', # 注意下划线
  4. ]

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

  1. from django.urls import include
  2. # ...
  3. urlpatterns = [
  4. ...
  5. path('summernote/', include('django_summernote.urls')),
  6. ...
  7. ]

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

  1. MEDIA_URL = '/media/'
  2. MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
  3.  
  4. # Django 3.X用户还需增加如下配置
  5. X_FRAME_OPTIONS = 'SAMEORIGIN'

如果你在本地开发测试环境debug=True, 你还需要使用django自带static静态文件服务器才能正确显示上传的图片。修改项目的urls.py, 添加如下代码:

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

第二步 使用django-summernote

你可以在Django自带管理后台admin中使用django-summernote, 也可以在自己的表单中使用django-summernote。

admin中使用

  1. from django_summernote.admin import SummernoteModelAdmin
  2. from .models import Post
  3.  
  4. class PostAdmin(SummernoteModelAdmin):
  5. summernote_fields = ('content',)
  6.  
  7. admin.site.register(Post, PostAdmin)

展示效果如下所示:

表单中使用

如果你使用普通表单,只需要设置富文本显示字段的widget即可,如下所示:

  1. from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget
  2.  
  3. # Apply summernote to specific fields.
  4. class PostForm(forms.Form):
  5. content = forms.CharField(widget=SummernoteWidget()) # instead of forms.Textarea
  6.  
  7. # 如果你已使用django-crispy-forms, 请使用
  8. class PostForm(forms.Form):
  9. content = forms.CharField(widget=SummernoteInplaceWidget())

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

  1. class PostForm(forms.ModelForm):
  2. class Meta:
  3. model = Post
  4. widgets = {
  5.             'content': SummernoteWidget(),
  6. }

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

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

第三步 测试效果

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

第四步 常规配置

常用设置选项如下所示,可以满足大部分项目需求,可以直接copy使用。

  1. SUMMERNOTE_CONFIG = {
  2.     'iframe': True,
  3.     # 如果你本身已使用Bootstrap/jQuery主题
  4.     # 'iframe': False,
  5. 'summernote': {
  6. # As an example, using Summernote Air-mode
  7.         'airMode': False,
  8.         
  9. # 编辑窗口 size
  10. 'width': '100%',
  11. 'height': '450',
  12.  
  13. # 语言设置
  14. 'lang': None,
  15.  
  16. # 工具栏图标
  17. # https://summernote.org/deep-dive/#custom-toolbar-popover
  18. 'toolbar': [
  19. ['style', ['style',]],
  20. ['font', ['bold', 'underline', 'clear']],
  21. ['fontname', ['fontname']],
  22. ['fontsize', ['fontsize']],
  23. ['color', ['color']],
  24. ['para', ['ul', 'ol', 'paragraph']],
  25. ['table', ['table']],
  26. ['insert', ['link', 'picture', 'video']],
  27. ['view', ['redo', 'undo', 'fullscreen', 'codeview',]],
  28.         ],
  29. },
  30.  
  31.     # 上传图片需要用户先登录.
  32. 'attachment_require_authentication': True,
  33.  
  34. # Set `upload_to` function for attachments.
  35. # 'attachment_upload_to': my_custom_upload_to_func(),
  36.  
  37. # Set custom storage class for attachments.
  38.     # 'attachment_storage_class': 'my.custom.storage.class.name',
  39.     
  40. # You can completely disable the attachment feature.
  41.     'disable_attachment': False,
  42.     
  43. # Set to `True` to return attachment paths in absolute URIs.
  44.     'attachment_absolute_uri': False,
  45.     
  46. # test_func in summernote upload view. (Allow upload images only when user passes the test)
  47. # https://docs.djangoproject.com/en/2.2/topics/auth/default/#django.contrib.auth.mixins.UserPassesTestMixin
  48. # ```
  49. # def example_test_func(request):
  50. # return request.user.groups.filter(name='group_name').exists()
  51. # ```
  52. # 'test_func_upload_view': example_test_func,
  53.     # 懒加载
  54.     'lazy': True,
  55. }

以上就是Django集成富文本编辑器summernote的实现步骤的详细内容,更多关于Django集成富文本编辑器summernote的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号