文档章节

Kindeditor 使用思路

Asktao
 Asktao
发布于 2017/11/03 15:05
字数 549
阅读 115
收藏 0

环境:

下载地址:http://kindeditor.net/down.php
文档地址:http://kindeditor.net/doc.php

PS:下载的工具包中有一些是配合特定后台语言的Dome,并非我们实际需要的。
        其中核心的部分只有:
       

第一次跑起Kindeditor

<!-- kindeditor 需要指定在textarea   -->
<div style="width:600px; margin:0 auto">
    <textarea id="content"></textarea>
</div>

<script src="jquery-min.js"></script>
<script src="kindeditor-all.js">
<script>
    $(function(){
        KindEditor.create("#content",{
            width:"100%",
            height:"300px",
            minWidth:200,
            minHeight:300,
        });
    })
//编辑器初始化参数:
//  http://kindeditor.net/docs/option.html
</script>

 

难点1:上传文件

// JS

KindEditor.create("#content",{
    uploadJson: "文件上传路径",   // 其中附带参数dir=image、dir=flash、dir=file
    filePostName: "上传文件的POST的name名",
})
def upload_img(request):
    request.GET.get('dir')
    print(request.FILES.get('fafafa'))
    # 获取文件保存
    import json
    dic = {    # kindeditor的固定格式
        'error': 0,
        'url': '/static/imgs/20130809170025.png',   # 页面将生成预览
        'message': '错误了...'
    }

    return HttpResponse(json.dumps(dic))

 

难点2:远程文件管理

KindEditor.create("#content",{

    fileManagerJson: "文件管理的路径",       // django中,urls中设置路径。
    allowFileManager:true,   //kindeditor中,上传图片时,增加图片空间按钮。
})
import os
import time
import json
def file_manager(request):
    """
    文件管理
    :param request:
    :return:
    {
        moveup_dir_path: "url,上级目录",
        current_dir_path: "url 当前目录",
        current_url: "预览图片时的目录地址前缀",
        file_list: [
            {
                'is_dir': True,
                'has_file': True,
                'filesize': 0,
                'dir_path': '',
                'is_photo': False,
                'filetype': '',
                'filename': xxx.png,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            },
            {
                'is_dir': True,
                'has_file': True,
                'filesize': 0,
                'dir_path': '',
                'is_photo': False,
                'filetype': '',
                'filename': xxx.png,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            }
        ]

    }


    """
    dic = {}
    root_path = 'C:/Users/Administrator/PycharmProjects/day24/static/'
    static_root_path = '/static/'
    request_path = request.GET.get('path')
    if request_path:
        abs_current_dir_path = os.path.join(root_path, request_path)
        move_up_dir_path = os.path.dirname(request_path.rstrip('/'))
        dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path

    else:
        abs_current_dir_path = root_path
        dic['moveup_dir_path'] = ''

    dic['current_dir_path'] = request_path
    dic['current_url'] = os.path.join(static_root_path, request_path)

    file_list = []
    for item in os.listdir(abs_current_dir_path):
        abs_item_path = os.path.join(abs_current_dir_path, item)
        a, exts = os.path.splitext(item)
        is_dir = os.path.isdir(abs_item_path)
        if is_dir:
            temp = {
                'is_dir': True,
                'has_file': True,
                'filesize': 0,
                'dir_path': '',
                'is_photo': False,
                'filetype': '',
                'filename': item,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            }
        else:
            temp = {
                'is_dir': False,
                'has_file': False,
                'filesize': os.stat(abs_item_path).st_size,
                'dir_path': '',
                'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,
                'filetype': exts.lower().strip('.'),
                'filename': item,
                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
            }

        file_list.append(temp)
    dic['file_list'] = file_list
    return HttpResponse(json.dumps(dic))

PS:

allowFileUpload                 true时显示文件上传按钮。

allowMediaUpload            true时显示视音频上传按钮。

allowFlashUpload              true时显示Flash上传按钮。

allowImageUpload            true时显示图片上传按钮。

 

难点3:上传图片时,ajax附带参数:解决csrf_token问题

KindEditor.ready(function(K) {
        K.create('#id', {
                extraFileUploadParams : {
                        item_id : 1000,
                        category_id : 1,
                        csrfmiddlewaretoken:{{ csrf_token }}
                        // 在HTML中,form标签增加{% csrf_token %}
                }
        });
});

 

 

© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
KindEditor在thinkphp上的使用方法

KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,且兼容主流浏览器。与ueditor这样的大块头相比,KindEditor的优点是不言而喻的--它体积小,加载速...

网菠萝果
2012/11/20
2.6K
0
kindeditor增加了一个商业授权,可能需要调整概述

KindEditor 默认在 LGPL 开源授权协议下发布,免费使用 KindEditor 必须遵守 LGPL 开源授权协议。 同时,KindEditor 为商业用户准备了 商业授权协议,获得商业授权之后,不受 LGPL 开源授权协...

戴威
2011/04/26
701
6
kindeditor php修改上传文件的保存路径

Kindeditor 是一款开源的html编辑器。 我使用的是php版本,修改路径的文件在/kindeditor/php/下的upload_json.php中。 第17行这: //文件保存目录路径$savepath = $phppath . '../attached/'...

Jceee
2014/04/10
2.6K
1
.NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件

  KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无...

80368704
2018/06/29
0
0
Django轻松使用富文本编辑器-KindEditor

Django轻松使用富文本编辑器-KindEditor 由于需要在django admin中使用到富文本编辑器,由于我比较喜欢KindEditor,于是写了个自定义widget 1、首先从KindEditor主页下载,并解压至你的stati...

KavenSu
2014/06/04
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

java快递电子面单打印接口对接demo

之前的后天管理系统的电子面单打印使用的是灵通打单。 使用相对比较麻烦,需要到处Excel之后再导入,麻烦。 快递鸟有电子面单api,后台系统直接对接很是方便,不过也遇到了好些问题。 不难是...

程序的小猿
22分钟前
3
0
fasjtjson文档

https://github.com/alibaba/fastjson/wiki/JSONField

jirak
22分钟前
3
0
Mybatis中插入多条记录

Oracle数据库 实现方法 <insert id="saveWithdrawLog"> INSERT ALL INTO OSM_TRADE_DETAIL(SID,MBR_ID,USR_ID,TRADE_MONEY,TRADE_TYPE,TRADE_TIME,TRADE_WAY,PAY_ID) VALUES(#{si......

豫华商
23分钟前
3
0
Flink on YARN(下):常见问题与排查思路

作者:杨弢(搏远) Flink 支持 Standalone 独立部署和 YARN、Kubernetes、Mesos 等集群部署模式,其中 YARN 集群部署模式在国内的应用越来越广泛。Flink 社区将推出 Flink on YARN 应用解读...

开源中国小二
25分钟前
3
0
技术沙龙|京东云端到端多媒体关键技术揭秘

编者按:从带来更高编码效率、更好的用户体验的京享高清,到直播架构与网络演进优化,从而为用户带来更流畅的观看体验,以及运维系统的异常自动修复和高弹性的多媒体存储架构,一层一层展示出...

京东云技术新知
25分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部