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 

  • 相关阅读:
    在 Windows 上测试 Redis Cluster的集群填坑笔记
    vmware安装黑苹果教程
    微信支付v3发布到iis时的证书问题
    Linux下安装SQL Server 2016(连接篇SQL Server on linux)
    Linux下安装SQL Server 2016(连接篇SQL Server on linux)
    Linux下安装SQL Server 2016(安装篇SQL Server on linux)
    Linux下安装SQL Server 2016(准备篇SQL Server on linux)
    客服端与服务端APP支付宝支付接口联调的那些坑
    ASP.NET MVC]WebAPI应用支持HTTPS的经验总结
    .net平台下C#socket通信(中)
  • 原文地址:https://www.cnblogs.com/golangav/p/7209014.html
Copyright © 2011-2022 走看看