django原生没有富文本编辑器,做企业网站或个人博客网站时没有富文本编辑器,展示出来的页面不美观,无法做到所见即所得的编辑方式进行页面排版,所以我们需要引入第三方富文本编辑器。
之前找了好多文档博客,有些博客虽然写的很好,有些是相互转载,但是毕竟不是自己写的好多地方要么使用版本很老,要么不不够全面,综合整理了大神的博客,所以就有了这篇博客记录下详细设置及注意事项,以后有需求就不用到处找资料了,同时也分享有需要的朋友,提供借鉴。本次使用的是kindeditor 富文本编辑器。之所以选择这个编辑器主要是一、对高版本django兼容性好,设置使用方便(相对django-ueditor);二、是它功能齐全还美观。下面这张图是kindeditor的样子,功能丰富,外观好看。
好了,开始我们的django 使用kindeditor之路
在应用中使用
第一步:
到官网下载kindeditor
下载好后删除在django中使用不到的文件
第二步:
将删除后的文件引入自己的项目中。根目录下的static/js/kindeditor,如下图
django的settings配置文件中配置静态文件上传目录,编辑器中上传的文件将保存在这里,
在文件尾部添加如下代码:
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
如media文件夹不存在,手动在项目根目录新建media文件夹
第三步:
在项目的urls配置文件中配置路由如下图(注:django3默认取消了url,需要手动添加url模块)
from django.views import static
from django.conf import settings
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
url(r"^media/(?P<path>.*)$", static.serve, {"document_root": settings.MEDIA_ROOT, }),]
第四步:在自己的应用中创建一个名为upload.py的模块,用来处理上传图片、文件和视频。
以下是我的代码仅供参考:
import os
import json
import datetime from django.http import HttpResponse
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt @csrf_exempt
def upload_image(request, dir_name):
result = {"error": 1, "message": "上传出错"}
files = request.FILES.get("imgFile", None)
if files:
result = image_upload(files, dir_name)
return HttpResponse(json.dumps(result), content_type="application/json") def upload_genetation_dir(dir_name):
today = datetime.datetime.today()
dir_name = dir_name + '/%d/%d_%d/' % (today.year, today.month, today.day)
if not os.path.exists(settings.MEDIA_ROOT + dir_name):
os.makedirs(settings.MEDIA_ROOT + dir_name)
return dir_name def image_upload(files, dir_name):
allow_suffix = ['jpg', 'png', 'jpeg','gif','bmp','swf','flv','doc','docx','xls','xlsx','pdf']
file_suffix = files.name.split(".")[-1]
if file_suffix not in allow_suffix:
return {"error": 1, "message": "格式不正确"}
relative_path_file = upload_genetation_dir(dir_name)
path = os.path.join(settings.MEDIA_ROOT, relative_path_file)
if not os.path.exists(path):
os.makedirs(path)
file_name = files.name.split(".")[0] +"."+ file_suffix
path_file = os.path.join(path, file_name)
file_url = settings.MEDIA_URL + relative_path_file + file_name
open(path_file, 'wb').write(files.file.read())
return {"error": 0, "url": file_url}
第五步:配置应用中的url
在应用的urls.py中导入刚才写的视图文件upload.py
from webtest.uploads import upload_image
url(r'^admin/media/(?P<dir_name>[^/]+)$', upload_image, name='upload_image'),
第六步: 在使用之前我们需要先到kindeditor目录下新建一个config.js文件写入如下代码
KindEditor.ready(function (k) {
window.editor = k.create('#id_text',{
#这个地方需要注意;模型类中使用 text = models.TextField()的话id就是id_text。如果是其他字段类型可以到浏览器中检查,获取到需要使用富文本编辑器的元素的id
resizeType:1,
allowPreviewEmoticons: false,
allowImageUpload: true,
allowFileManager: true,
fileManagerJson: '/admin/media/upload',
uploadJson: '/admin/media/upload', #与urls中配置的路径保持一致。
width:'700px',
height:'600px',
});})
第七步:在admin.py注册模块类,将kindeditor的js文件引入到admin中(注:class Media不能写错)
我的模型类如下图
以上全部配置完成,最终效果如下图
如提示匹配不到路径问题,需要将media_url上传文件路径注册到模板中,如图
'django.template.context_processors.media',
由于每个人的代码可能不一样,以上仅供参考