文本编辑器(KindEditord)

1、下载

• 官网下载：http://kindeditor.net/down.php
• 本地下载：http://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