kindeditor简单使用（Django）

富文本编辑框：
编辑框是一个插件，有多种，这里使用kind editor

一、从官网下载插件

　　- http://kindeditor.net/doc.php

　　- Django下插件中的有些目录无需使用，可以删除

　　　　- asp - ASP程序

　　　　- asp.net - ASP.NET程序

　　　　- php - PHP程序

　　　　- jsp - JSP程序

　　　　- examples - 演示文件

二、导入插件

　　- <script src="/static/kindeditor/kindeditor-all.js"></script>

三、生成富文本编辑框

　　- 初始化参数有很多，详见  - http://kindeditor.net/docs/option.html#filemanagerjson

　　- items参数默认全部

<script>
    //整个页面加载完成后执行函数
    KindEditor.ready(function (K) {
        window.editor = K.create(
            "#editor",
            //编辑器初始化参数
            {
                //高度和宽度有最小值650*100
{#                width:'1000px',#}
{#                height:'800px',#}
                //配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
                items:[
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink', '|', 'about',
                ],
                // 指定处理上传的url
                uploadJson:'../upload_img/',
            }
        )
    })
</script>

四、对于上传文件的处理

　　- 先生成一个文本标签 - <textarea name="" id="editor" cols="30" rows="10"></textarea>

　　- 以图片上传为例，将图片保存到服务器端，并在文本框中预览

　　- 要注意预览图片时返回的url的间隔符   " / "

def upload_img(request):
    """
    上传文件的保存与状态信息的返回
    :param request:  
    :return: 返回状态，告诉前端是否上传成功
    """
    print(request.POST)
    print(request.FILES)
    print(BASE_DIR)
    dic = {"error": None, "url": None, "message": None}
    try:
        # 根据文件名组成保存路径
        file_name = os.path.join(BASE_DIR,"static","img",str(request.FILES.get("imgFile")))
        print(file_name)
        f = open( file_name,"wb")
        for i in request.FILES.get("imgFile").chunks():   # 图片是一个对象，要调用chunks()方法一部分一部分的取
            f.write(i)
        f.close()
        dic["error"] = 0
        # 文件预览路径，必须使用 " / " ,os.path.join生成的文件路径无法预览
        dic["url"] = "/static/img/" + str(request.FILES.get("imgFile"))
    except Exception as e:
        dic["error"] = 1
        dic["message"] = e
    """
    //返回信息
    {
            "error" : 0,   # 0代表成功，1代表错误
            "url" : "http://www.example.com/path/to/file.ext"  #图片预览
            "message":"错误信息"
    }
    """
    return JsonResponse(dic)