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',
        ),
    },
    ...
    ...
}