1、什么是kindeditor？

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

2、下载

　　-官网下载：http://kindeditor.net/down.php
　　-本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip

3、文件夹说明

├── 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主题

4、基本使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <textarea name="content" id="content"></textarea>

     

    <script src="/static/js/jquery-1.12.4.js"></script>

    <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>

    <script>

        $(function () {

            initKindEditor();

        });

     

        function initKindEditor() {

            var kind = KindEditor.create('#content', {

                width: '100%',       // 文本框宽度(可以百分比或像素)

                height: '300px',     // 文本框高度(只能像素)

                minWidth: 200,       // 最小宽度（数字）

                minHeight: 400      // 最小高度（数字）

            });

        }

    </script>

</body>

</html>

效果显示为：

5、详细参数

　　http://kindeditor.net/docs/option.html

6、上传文件示例

kind.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<form>

    {% csrf_token %}

    <div style="width: 500px;margin: 0 auto">

        <textarea id="content"></textarea>

    </div>

    <input type="submit" value="提交"/>

</form>

<script src="/static/js/jquery-1.12.4.js"></script>

<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>

<script>

    $(function () {

        KindEditor.create('#content', {

            {#                items: ['superscript', 'clearhtml', 'quickformat', 'selectall']#}

            {#                noDisableItems: ["source", "fullscreen"],#}

            {#                designMode: false#}

            uploadJson: '/upload_img/',

            fileManagerJson: '/file_manager/',

            allowImageRemote: true,

            allowImageUpload: true,

            allowFileManager: true,

            extraFileUploadParams: {

                csrfmiddlewaretoken: "{{ csrf_token }}"

            },

            filePostName: 'fafafa'

        });

    })

</script>

</body>

</html>
views.py

def kind(request):

    return render(request, 'kind.html')

def upload_img(request):

    request.GET.get('dir')

    print(request.FILES.get('fafafa'))

    # 获取文件保存

    import json

    dic = {                             #后台向前端返回的值

        'error': 0,                    #0表示的是正确的,1代表错误

        'url': '/static/image/图片.jpg',

        'message': '错误了...'

    }

    return HttpResponse(json.dumps(dic))

import os

import time

import json

def file_manager(request):

    dic = {}

    root_path = 'E:/week_23_1/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  #current_dir_path 指当前的路径

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

    file_list = []            #文件目录

    for item in os.listdir(abs_current_dir_path):         #listdir 就是把某一路径下的东西全部拿下来

        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,   #是否是dir

                '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))

操作页面展示：

Django之kindeditor的更多相关文章

  1. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  2. Django（九）下：Ajax操作、图片验证码、KindEditor使用

    三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...

  3. Django 中使用kindeditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

  4. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  5. Python开发【Django】：图片验证码、KindEditor

    图片验证码 生成图片验证码需要以下: session check_code.py(依赖:Pillow,字体文件) 模块安装 pip install Pillow src属性后面加? 在utils下拷贝 ...

  6. python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

  7. django admin富文本编辑kindeditor

    最近在做django项目,需要在后台管理系统加入富文本编辑 其实加入富文本编辑很简单,就是导入几个编辑器的js脚本到admin页面内,下面说说怎么做 第一步,下载想要的富文本编辑器如kindedito ...

  8. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  9. Django项目开发，XSS攻击，图片防盗链，图片验证码，kindeditor编辑器

    目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...

随机推荐

  1. Navicat Premium_11.2.7简体中文版 破解版本 windows版本

    亲测可用 自己一直在用的 https://pan.baidu.com/s/1VVKKQoIKVB0BgNXBK4YTrQ

  2. Java多线程 -yield用法

    前几天复习了一下多线程,发现有许多网上讲的都很抽象,所以,自己把网上的一些案例总结了一下! 一. Thread.yield( )方法: 使当前线程从执行状态(运行状态)变为可执行态(就绪状态).cpu ...

  3. zepto中$.proxy()的到底有多强大？

    好吧,其实是标题党了,哈哈,只是想总结一下工作中遇到$.proxy()的用法而已. 一.语法: $.proxy()有两种使用语法 1)$.proxy(fn,context),fn是一个函数,conte ...

  4. HDU2460-Network

    题目 给一个\(n\)个点\(m\)条边的无向连通图,\(Q\)次往图中加边,每次加边后问图中的桥有多少个.(加边后边留着). \(n\le 10^5,m\le 2\times 10^5,Q\le 1 ...

  5. canvas - 简单的神经网络

    1.国际惯例,先上效果图 一下效果图使用三次贝塞尔曲线进行连线,代码中有直接使用直线连线的代码,可直使用. 2.查看演示请看 这里. 3 代码     html: <canvas id=&quo ...

  6. [您有新的未分配科技点]博弈论进阶：似乎不那么恐惧了…… （SJ定理，简单的基础模型）

    这次,我们来继续学习博弈论的知识.今天我们会学习更多的基础模型,以及SJ定理的应用. 首先,我们来看博弈论在DAG上的应用.首先来看一个小例子:在一个有向无环图中,有一个棋子从某一个点开始一直向它的出 ...

  7. HBase多租户机制分析

    在HBase1.1.0发布之前,HBase同一集群上的用户.表都是平等的,没有优劣之分.这种’大同’社会看起来完美,实际上有很多问题.最棘手的主要有这么两个,其一是某些业务较其他业务重要,需要在资源有 ...

  8. MapReduce(一) mapreduce基础入门

    一.mapreduce入门 1.什么是mapreduce 首先让我们来重温一下 hadoop 的四大组件:HDFS:分布式存储系统MapReduce:分布式计算系统YARN: hadoop 的资源调度 ...

  9. pycrypto 安装

    https://www.dlitz.net/software/pycrypto/ 下载pycrypto-2.6.1.tar.gz,解压后 python setup.py build python se ...

  10. C++ STL 一般总结（转载）

    注:原博地址:http://www.cnblogs.com/biyeymyhjob/archive/2012/07/22/2603525.html 以下内容来源网上 经过整合而成 一.一般介绍 STL ...