富文本编辑器的使用

一.kindeditor编辑器使用（编辑器的种类很多，可以去网上搜索）

参考下载页面文档

1.下载页面: http://www.kindsoft.net/down.php

2. 修改HTML页面

（1）在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

（2）在该HTML页面添加以下脚本

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 

二、编辑器上传文件

别人写好了接口，但是接口不是你自己的

你需要手动去修改

文档——上传文件

 

 

 

 上传图片却返回403  csrf   此时需要上传额外的参数，详见编辑器初始化参数

• extraFileUploadParams   

 

 

 

 图片传过去了，却被404页面捕获了

此时需要开放url：

upload/image接口

 

 

 

 

 

 

原因是返回格式有限制

返回格式(JSON)

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

import os
from dj_BBS01 import settings
def upload_image(request):

    """
    //成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}
    :param request:
    :return:
    """
    back_dic = {'error': 0}  # 先提前定义返回给编辑器的数据格式
    #用户写文章上传的图片，也算静态资源 也应该放到media文件夹下
    if request.method=='POST':

        #获取用户上传的图片对象
        #print(request.FILES)  #打印看到了键，固定叫imaFile
        file_obj=request.FILES.get("imgFile")
        #手动凭借存储文件的路径
        file_dir=os.path.join(settings.BASE_DIR,"media",'article_img')
        #优化操作，先判断当前文件夹是否存在，不存在则自动创建
        if not os.path.isdir(file_dir):
            os.mkdir(file_obj)  #创建一层目录结构 article_img
        #拼接图片的完整路径
        file_path=os.path.join(file_dir,file_obj.name)
        with open(file_path,'wb') as f:
            for line in file_obj:
                f.write(line)
         #为什么不直接使用file_path  /dj_BBS01/media/
        back_dic['url']='/media/article_img/%s' %file_obj.name
    return JsonResponse(back_dic)