title: Django-使用富文本编辑器
copyright: true
top: 0
date: -07-14 19:57:15
tags:
categories: WEB 后端框架
permalink:
password:
keywords: Ckeditor
description: Django中使用CKeditor编辑器。
有些人认识了很久,也未必很熟,有些人看到对方的第一眼,就会觉得很亲近。
使用富文本编辑器Ckeditor
网站开发过程中,文本编辑器直接调用第三方的编辑器会省下很多事情,并且相对来说比较安全。
常见的编辑器有ewebeditor,fckeditor,ueditor等等,这里使用ckeditor编辑器
安装过程
使用命令即可完成安装:
pip3 install django-ckeditor
然后添加到配置文件
修改
LANGUAGE_CODE = 'zh-hans'
到这里ckeditor就安装配置完毕,但是是没法使用图片上传功能的,这个时候需要另行安装图片处理库pillow
pip3 install pillow
在settings文件中的INSTALLED_APPS中添加注册
INSTALLED_APPS = [# ...'ckeditor','ckeditor_uploader',]
使用上传功能,需要设置上传位置。该文件是上传到media目录,所以也需要设置media。打开settings.py添加如下设置:
MEDIA_URL = '/media/'# 放在django项目根目录,同时也需要创建media文件夹MEDIA_ROOT = os.path.join(BASE_DIR, 'media')CKEDITOR_UPLOAD_PATH = 'upload/'CKEDITOR_IMAGE_BACKEND = 'pillow'
使用linux的话,需要在根目录下执行下面两行命令
mkdir mediacd mediamkdir uploadchomd 777 midia
即在根目录下创建一个media的文件夹,然后在media文件夹下面创建一个upload的文件夹
如上完成:
设置 MEDIA_ROOT 和 MEDIA_URL,CKEDITOR_UPLOAD_PATH = ‘upload/’,图片将上传到项目下的media/upload路径下,图片的url是 /media/upload/设置CKEDITOR_IMAGE_BACKEND = ‘pillow’, 用于生成图片缩略图,在编辑器里浏览上传的图片
配置上传url和media的访问
上传功能需要有地址可以请求,需要需要提供上传的url。打开全局的urls.py,添加设置到urlpatterns中:
path('ckeditor/', include('ckeditor_uploader.urls')),
另外,上传的图片是到media中,不是在static中。我们还需要设置media可被访问,如下设置可用于开发中使用,若部署到服务器可用服务器软件设置,继续在urls.py中添加如下内容:
from django.conf import settingsfrom django.conf.urls.static import staticurlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
如果使用nginx来配置静态资源,在nginx的配置文件里
location /media {alias /path-to/media;}
注意:在linux开发环境中,启动django的时候,需要加上sudo
使用过程
在需要用到编辑器的地方,比如自带的后台管理系统,以及自己在前端页面需要写文章的部分。使用django的models和forms两个自带的模型层和表单层进行修改即可使用富文本编辑器。
模型层
比如我之前的Mdoels是这样的
class Datas(models.Model):contet = models.TextField()
如果需要使用富文本编辑器,则需要进行如下修改
from ckeditor_uploader.fields import RichTextUploadingFieldclass Datas(models.Model):content = RichTextUploadingField(verbose_name='正文')
这样的话,在编辑content的部分就可以直接使用ckeditor编辑器,并且具有上传图片功能。
如果不想添加使用上传图片功能,使用下面的类即可
from ckeditor.fields import RichTextFieldclass Datas(models.Model):content = RichTextField()
这样就不能上传图片文件,只能引用远程图片
表单层
首先需要把settings文件进行如下更改设置
STATIC_URL = '/static/'STATIC_ROOT = os.path.join(os.path.join(BASE_DIR, '/static/'))STATICFILES_DIRS = (os.path.join(os.path.join(BASE_DIR, 'static')),)MEDIA_URL = '/media/'# 放在django项目根目录,同时也需要创建media文件夹MEDIA_ROOT = os.path.join(BASE_DIR, 'media')CKEDITOR_UPLOAD_PATH = 'upload/'
然后执行命令
python3 manage.py collectstatic
接下就可以编写表单文件
from ckeditor.fields import RichTextFieldclass Comment(forms.Form):comment = RichTextField()from .forms import Commentdef index(request):return render(request,'comment.html',{'comment':Comment()})
然后每次调用ckeditor之前,都需要先引用编辑器所需要的文件,使用{{ form.media }}调入ckeditor静态文件(js, css和图片),最后在comment.html中编写如下
<form>COMMENT:{{ comment.media}}{{ comment|safe }}</form>
还可以这么写
<form>COMMENT:{% load static %}<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script><textarea name="editor1"></textarea><script>CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});</script></form>
如果嫌麻烦的话,或者不想写forms表单的内容熟悉,可以直接在前段远程调用ckeditor编辑器
<form>COMMENT:<script src="///4.5.9/standard/ckeditor.js"></script><textarea name="editor1"></textarea><script>CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});</script></form>
配置文件
CKEDITOR_ALLOW_NONIMAGE_FILES = False 不允许非图片文件上传,默认为TrueCKEDITOR_BROWSE_SHOW_DIRS = True 在编辑器里浏览上传的图片时,图片会以路径分组,日期排序CKEDITOR_RESTRICT_BY_USER = True 限制用户浏览图片的权限,只能浏览自己上传的图片,图片会传到以用户名命名的文件夹下,超级管理员依旧可以看所有图片修改staff_member_required装饰器变为login_required。
这一点是在admin内和admin外使用ckeditor最的不同。如果需要使用文件上传,ckeditor默认只有员工(staff member)才有这个权限。如果你需要admin外的用户也能上传图片或文件,你需要将staff_member_required装饰器改为login_required。
你需要按site-packages - > ckeditor_uploader -> templates -> urls.py的源码,把staff_member_required装饰器改为login_required。
if django.VERSION >= (1, 8):urlpatterns = [url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),]
欢迎关注公众号:【安全研发】获取更多相关工具,课程,资料分享哦~