django-summernote富文本編輯器使用（附離線問題修復）

安裝及集成使用

簡單介紹一下怎麼在django的管理後臺和用戶使用網頁中使用django-summernote富文本編輯器，其他富文本編輯器類似。
同時解決如何在離線環境，無外網權限的情況下使用django-summernote，需要小小修改一下源碼

一、後臺使用富文本編輯器

1.用pip安裝django-summernote;

pip install django-summernote

2.在項目的setting中，將django-summernote添加到app中；

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_summernote',
]

並在setting.py中添加：

MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

3.在url.py中添加路由；

首先導入：

from django.views.static import serve

其次在urlpatterns中添加：

path('summernote/', include('django_summernote.urls')),
path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),  # 用於上傳圖片文件，也可以上傳其他文件word,ppt等。
path('static/<path:path>', serve, {'document_root': settings.STATIC_ROOT}),  # 用於加載靜態文件

通過上面的步驟，接下來就可以在模型models.py中使用summernote富文本編輯器了，

4.在models.py中使用SummernoteTextField替代models.TextField：

首先導入SummernoteTextField，

from django_summernote.fields import SummernoteTextField

創建類，並將內容字段作爲富文本字段：

class WeeklyReport(models.Model):
    mission_name = models.CharField(max_length=150, default="", verbose_name="任務名稱")
    system_name = models.CharField(max_length=150, default="", verbose_name="涉及系統", null=True, blank=True)
    mission_user = models.CharField(max_length=150,  default="", verbose_name="負責人")
    mission_target = models.TextField(max_length=999, verbose_name="任務目標")
    
def __str__(self):
	return self.mission_name

class Meta:
    verbose_name = "週報"
    verbose_name_plural = verbose_name

5.在admin.py中註冊創建的模型；

使用命令：python manage.py migrate, 以及python manage.py makemigrations創建相應table，

再運行python manage.py runserver

6.打開diango後臺，如圖所以就可以看見文章內容字段爲富文本編輯器，有許多功能可以使用：

離線使用django-summernote問題解決

二、解決離線無外網情況下編輯器無法展示的問題

1、下載bootstrap和jquery對應版本靜態文件

cd /tmp
wget hhtps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
wget http://code.jquery.com/jquery-3.3.1.min.js
wget https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js

2、找到django-summernote源碼安裝路徑

cd /Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/django_summernote/static # 路徑自己找
cp /tmp/bootstrap.min.css /tmp/bootstrap.min.js /tmp/jquery-3.3.1.min.js .

3、修改summernote的utils.py文件

參考修改如下，再離線環境先即可使用

# Theme files dictionary
SUMMERNOTE_THEME_FILES = {
    'bs3': {
        'base_css': (
            # '//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css',
            '/static/summernote/bootstrap.min.css',
        ),
        'base_js': (
            # '//code.jquery.com/jquery-3.3.1.min.js',
            # 's',
            '/static/summernote/jquery-3.3.1.min.js',
            '/static/summernote/bootstrap.min.js',
        ),
        'default_css': (
            'summernote/summernote.css',
            'summernote/django_summernote.css',
        ),
        'default_js': (
            'summernote/jquery.ui.widget.js',
            'summernote/jquery.iframe-transport.js',
            'summernote/jquery.fileupload.js',
            'summernote/summernote.min.js',
            'summernote/ResizeSensor.js',
        ),
    },
    ...
    ...
}