文本編輯器(KindEditord)

時間 2019-11-13

標籤文本編輯器 kindeditord 简体版

原文原文鏈接

一、下載php

官網下載：http://kindeditor.net/down.php
本地下載：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip

二、文件夾說明css

├── 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主題

三、基本使用html

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

四、詳細參數前端

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

五、上傳文件本質：上傳圖片時,點擊上傳會默認幫你生成ifrem和form標籤,而後在form標籤裏生成一個image標籤，以Ajax方式發送到後臺(僞Ajax)python

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。