文本编辑器(KindEditord)

1、下载

官网下载：http://kindeditor.net/down.php
本地下载：https://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip

2、文件夹说明

├── asp                          asp示例
├── asp.net                    asp.net示例
├── attached                  空文件夹，放置关联文件attached
├── examples                 HTML示例
├── jsp                          java示例
├── kindeditor-all-min.js 全部JS（压缩）
├── kindeditor-all.js        全部JS（未压缩）
├── kindeditor-min.js      仅KindEditor JS（压缩）
├── kindeditor.js            仅KindEditor JS（未压缩）
├── lang                        支持语言
├── license.txt               License
├── php                        PHP示例
├── plugins                    KindEditor内部使用的插件
└── themes                   KindEditor主题

3、基本使用

<textarea name="content" id="content"></textarea>
 
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    $(function () {
        initKindEditor();
    });
 
    function initKindEditor() {
        var kind = KindEditor.create(\'#content\', {
            width: \'100%\',       // 文本框宽度(可以百分比或像素)
            height: \'300px\',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400      // 最小高度（数字）
        });
    }
</script>

4、详细参数

http://kindeditor.net/docs/option.html

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

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

urlpatterns = [

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

urls.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