zoukankan      html  css  js  c++  java
  • 文本编辑器 (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",{
                "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 

  • 相关阅读:
    PostgreSQL远端访问
    PostgreSQL在线安装
    /usr/lib64改名字风波
    Provisional headers are shown(一)
    解析URL中的携带的参数到Map
    Mysql5.7的初始密码更改
    REST开放接口生成文档工具之apidoc
    自己来实现一套IOC注解框架
    RecyclerView打造通用的万能Adapter
    RecyclerView分隔线定制
  • 原文地址:https://www.cnblogs.com/golangav/p/7209014.html
Copyright © 2011-2022 走看看