zoukankan      html  css  js  c++  java
  • Django-编辑器用法

    kindeditor编辑器下载地址 
      http://kindeditor.net/docs/index.html
      

    django中插入编辑器,首先看看成果 

    setting 中配置文件:

    STATIC_URL = '/static/'


    STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static'),
    ]

    MEDIA_ROOT=os.path.join(BASE_DIR,'media')

    MEDIA_URL = '/media/'

    要植入编辑器的textarea生成视图:

    def new_edit(request):

    form = NewModelForm()

    if request.method == "POST":
    form = NewModelForm(request.POST)
    if form.is_valid():
    form.save()
    return HttpResponse('发表成功!')

    return render(request,'new_edit.html',{'forms':form})



    form生成的textarea框id , 找到要植入编辑器的编辑器

    模板层 :
      
    <script charset="utf-8" src="/static/kindeditor/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/static/kindeditor/kindeditor/lang/zh-CN.js"></script>

    <script>
    KindEditor.ready(function (K) {
    {# textarea输入框标签选择器#}
    window.editor = K.create('textarea输入框id', {
                uploadJson: '/upload/',
    '100%',
    height: '500px',
    extraFileUploadParams: {
    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
    },
    afterBlur: function () {
    this.sync();
    },
    {# 这里相当与将文本编辑器保存不加传不到后端#}
    });
    });

    </script>
    模板层只需做这一步就可以 ,如果单纯的是文本输入 那么 这样已经是可以做到了,
    如果涉及到图片上传下载 那么 ,添加图片的上传和路由

    路由层:
      path('upload/', views.upload),#上传图片路由
      re_path(r'media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#访问静态文件请求走这里

    视图:.

    FILES管道取出图片转换成json格式
    def upload(request):
    img = request.FILES.get('imgFile')
    path = os.path.join(settings.MEDIA_ROOT,'add_article_img',img.name)
    with open(path,'wb')as f:
    for line in img:
    f.write(line)

    response={
    'error':0,
    'url':'/media/add_article_img/%s'%(img.name)
    }

    return HttpResponse(json.dumps(response))
     这样操作等于把客户端图片写到 服务器  然后访问的时候实际上是在读服务端存的图片

      以上






  • 相关阅读:
    hdu4998 旋转坐标系
    hdu4998 旋转坐标系
    hdu5012 水搜索
    hdu5012 水搜索
    hdu5007 小水题
    ZOJ 3645 BiliBili 高斯消元 难度:1
    ZOJ 3654 Letty's Math Class 模拟 难度:0
    ZOJ 3647 Gao the Grid dp,思路,格中取同一行的三点,经典 难度:3
    ZOJ 3646 Matrix Transformer 二分匹配,思路,经典 难度:2
    ZOJ 3644 Kitty's Game dfs,记忆化搜索,map映射 难度:2
  • 原文地址:https://www.cnblogs.com/sunny666/p/10902922.html
Copyright © 2011-2022 走看看