Django中使用SummerNote富文本编辑器
- 2020 年 3 月 5 日
- 筆記
这款编辑器基于Bootstrap和Jquery，也就是说项目中要先准备好Bootstrap和JQuery相关文件，当然也可以在线调用。相对于CKEditor我更喜欢SummerNote，因为它样式很漂亮，而且使用也很简单，图片上传不用再自己编写代码。提示：本教程基于Django项目，请先完成项目与应用的创建。
第一部分：Django后台使用SummerNote
一、安装SummerNote库
pip install django-summernote
二、添加静态文件
从SummerNote官网下载已编译的文件（Compiled ）。
下载地址：https://summernote.org/getting-started/#compiled-css-js
下载之后，解压缩，将“dist”文件夹中的文件复制到项目根目录的“static/summernote”文件夹中。
三、添加设置
打开文件“settings.py”，添加相关设置。
1.应用中添加：
'django_summernote'
2.静态目录
# 生产环境静态目录 PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__)) STATIC_ROOT = os.path.join(PROJECT_ROOT, '../statics') # 开发环境静态目录 STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static') # 媒体上传路径 MEDIA_ROOT = os.path.join(BASE_DIR, "static") MEDIA_DIRS = [os.path.join(BASE_DIR, 'static')]
四、添加URL配置
# 导入静态文件模块 from django.views.static import serve # 导入配置文件里的文件上传配置 from django.conf import settings # 配置富文本的URL path('summernote/', include('django_summernote.urls')), # 用于上传图片文件 path('static/', serve, {'document_root': settings.MEDIA_ROOT}), # 用于加载静态文件 path('static/', serve, {'document_root': settings.STATIC_ROOT}),
五、创建数据库表
SummerNote图片上传需要在数据库中创建数据表“django_summernote_attachment”，执行“migrate”命令即可自动创建。
六、测试
1、创建模型
示例代码：（models.py）
from django.db import models from django_summernote.fields import SummernoteTextField class SummerNoteTest(models.Model): TestField = SummernoteTextField()
2、注册模型
完成以上步骤之后，已经能够在Django后台编辑时使用富文本编辑器了。
不过，这个时候编辑器还是默认的设置，我们可以通过添加设置项进行更改。
七：设置
# 富文本设置 SUMMERNOTE_CONFIG = { # 是否使用IFrame的方式，不使用的话必须加载Bootstrap/jQuery。 'iframe': True, # 以下为SummerNote自定义设置 'summernote': { # 隐身模式 'airMode': False, # 编辑器的尺寸 'width': '960', 'height': '660', # 语言设置 'lang': 'zh-CN', # 设置字体列表 'fontNames': ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', '宋体', '微软雅黑'] }, # 附加样式表,多个主题时默认加载最后一个，建议注释不使用的主题。 'css': ( '/static/summernote/theme/paper.css', ), }
提示：主题文件需要下载后放入“/static/summernote/theme”文件夹（自己创建）中。
编辑器主题的下载地址：
cerulean：https://bootswatch.com/3/cerulean/bootstrap.css
cosmo：https://bootswatch.com/3/cosmo/bootstrap.css
cyborg：https://bootswatch.com/3/cyborg/bootstrap.css
darkly：https://bootswatch.com/3/darkly/bootstrap.css
flatly：https://bootswatch.com/3/flatly/bootstrap.css
lumen：https://bootswatch.com/3/lumen/bootstrap.css
paper：https://bootswatch.com/3/paper/bootstrap.css
journal：https://bootswatch.com/3/journal/bootstrap.css
readable：https://bootswatch.com/3/readable/bootstrap.css
sandstone：https://bootswatch.com/3/sandstone/bootstrap.css
simplex：https://bootswatch.com/3/simplex/bootstrap.css
slate：https://bootswatch.com/3/slate/bootstrap.css
spacelab：https://bootswatch.com/3/spacelab/bootstrap.css
superhero：https://bootswatch.com/3/superhero/bootstrap.css
united：https://bootswatch.com/3/united/bootstrap.css
yeti：https://bootswatch.com/3/yeti/bootstrap.css
编辑器主题效果预览：
https://summernote.org/examples/#themes-with-bootswatch
第二部分：前台页面使用SummerNote
1.在模板中载入静态文件:
(1)载入依赖工具,JQ和bootstrap
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
(2)载入summernote的js文件
{% load staticfiles %} <link type="text/css" rel="stylesheet" href="{% static 'myapp/summernote/summernote.css' %}" /> <script type="text/javascript" src="{% static 'myapp/summernote/summernote.js' %}"></script> <script type="text/javascript" src="{% static 'myapp/summernote/lang/summernote-zh-CN.js' %}"></script>
2.在html中插入summernote块
<div id="summernote">hello, summernote!</div>
3.在JQ中启动summernote并进行初始化(可根据官方文档和自己需求进行初始化)
$('#summernote').summernote({ lang : 'zh-CN', minHeight : 300, dialogsFade : true, dialogsInBody : true, disableDragAndDrop : false, });
