KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框

使用

到官网下载 kindeditor 最新版本，解压后将所有文件拷贝到项目的static文件夹下。注意，可以根据需要删除以下目录：

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

HTML模板中需要显示富文本编辑器的位置添加标签：

文章内容

添加脚本，引入KindEditor JS文件，为指定标签创建富文本编辑器。这里主要说使用KindEditor 上传图片时的必要参数：

说明：

图片上传要通过uploadJson参数指定上传的url路径
extraFileUploadParams参数用于提交csrf验证

图片的上传和预览流程：

在富文本编辑器中选择上传图片

Lexica
一个搜索 AI 生成图片的网站，可以上传图片或prompts搜索图片。

下载
KindEditor 将图片通过AJAX的方式上传到服务器指定url
该url对应的视图函数保存图片，并返回包含图片服务器路径的json响应
KindEditor 拿到响应的图片路径后，通过标签的src属性，显示预览图片

Django中的代码实现：

from django.conf.urls import urlfrom app import views

urlpatterns = [
    url(r'^upload/$', views.upload_file, name='upload_file'),

    url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),  # 配置media路由]

def upload_file(request):
    # 拿到文件，保存在指定路径
    print(request.FILES) # {'imgFile': []}
    imgFile = request.FILES.get('imgFile')  # 拿到文件对象，imgFile.name, 拿到文件名

    with open('app01/media/upload/img/'+imgFile.name,'wb')as f:   # with open 无法创建文件夹，需要自己创建
        for chunk in imgFile.chunks():
            f.write(chunk)    # 返回json响应
    response = {        
    'error': 0,        'url': '/media/upload/img/'+imgFile.name        # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
    }    return HttpResponse(json.dumps(response))

说明：