文本编辑器 (KindEditord)

一.示例

上传文件本质：上传图片时,点击上传 会默认帮你生成ifrem和form标签,然后在form标签里生成一个image标签，以Ajax方式发送到后台(伪Ajax)

urlpatterns = [

    #上传图片，写文章
    url(r'^test/', views.test),
    #查看写的文章
    url(r'^see/', views.see),
    #上传图  视频 文件
    url(r'^upload_img.html', views.upload_img),
]
urls.py
CONIENT = ""

def test(request):
    if request.method == "GET":
        return render(request,"test.html")
    else:
        content = request.POST.get("content")
        global CONIENT
        CONIENT = content
        print(content)
        return HttpResponse("...")


def see(request):
    return render(request,"see.html",{"con":CONIENT})


import os
def upload_img(request):

    #在之后可以根据获取到的dir判断是视频还是文件，这里没有用到
    type_obj = request.POST.get("dir")

    print(request.POST, request.FILES)
    file_obj = request.FILES.get("imgFile")
    file_path = os.path.join("static/images/",file_obj.name)
    with open(file_path,"wb") as f:
        for chunk in file_obj.chunks():
            f.write(chunk)

    #返回前端,可以预览
    dic = {
        'error': 0,
        'url': "/" +  file_path,
        'message': '错误了...'
    }

    import json
    return HttpResponse(json.dumps(dic))
view.py 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form method="POST" action="/test/">
        {% csrf_token %}
        <div>
            <div>文章内容</div>
            <div>
                <textarea id="id1" name="content"></textarea>
            </div>
        </div>
        <input type="submit" value="提交">
    </form>
    <script src="/static/css/kindeditor-4.1.10/kindeditor-all.js"></script>

    <script>
        KindEditor.create("#id1",{
            width:"700px",
            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'],
            //noDisableItems:['source', '|', 'undo'],     //保留某些item
            //designMode:false                            //其它注释

           //resizeType   改变窗口大小
            uploadJson:"/upload_img.html",  //上传文件
            extraFileUploadParams:{         //上传文件时携带token
                "csrfmiddlewaretoken":"{{ csrf_token }}"
            }
        })
    </script>

</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ con | safe }}
</body>
</html>
see.html

 

 

 

 

wuSir　

posted @ 2017-07-20 00:17  golangav  阅读(277)  评论(0)  编辑  收藏  举报