django3.0.7后台应该用中使用用KindEditor富文本编辑器

 

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',

 

 

由于每个人的代码可能不一样，以上仅供参考