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, });
