文本编辑器(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

秒客网

文本编辑器(KindEditord)

相关文章