安装及集成使用
简单介绍一下怎么在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',
),
},
...
...
}