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. NLP 入门

    作者:微软亚洲研究院链接:https://www.zhihu.com/question/19895141/answer/149475410来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  2. 使用vue的mixins混入实现对正在编辑的页面离开时提示

    mixins.ts import { Vue, Component, Watch } from "vue-property-decorator" Component.registe ...

  3. 【C++】深度探索C++对象模型读书笔记--Data语意学（The Semantics of data)

    1. 一个空类的大小是1 byte.这是为了让这一类的两个对象得以在内存中配置独一无二的地址. 2. Nonstatic data member 放置的是“个别的class object”感兴趣的数据 ...

  4. 【51Nod1773】A国的贸易 FWT+快速幂

    题目描述 给出一个长度为 $2^n$ 的序列,编号从0开始.每次操作后,如果 $i$ 与 $j$ 的二进制表示只差一位则第 $i$ 个数会加上操作前的第 $j$ 个数.求 $t$ 次操作后序列中的每个 ...

  5. Connections between cities HDU - 2874(最短路树 lca )

    题意: 给出n个点m条边的图,c次询问 求询问中两个点间的最短距离. 解析: Floyd会T,所以用到了最短路树..具体思想为: 设k为u和v的最近公共祖先 d[i] 为祖结点到i的最短距离  则di ...

  6. 【刷题】BZOJ 1951 [Sdoi2010]古代猪文

    Description "在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心--" --选自猪王国民歌 很久 ...

  7. 洛谷 P2195 HXY造公园 解题报告

    P2195 HXY造公园 题目描述 现在有一个现成的公园,有\(n\)个休息点和\(m\)条双向边连接两个休息点.众所周知,\(HXY\)是一个\(SXBK\)的强迫症患者,所以她打算施展魔法来改造公 ...

  8. HDU 4638 莫队算法

    Group Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  9. kotlin Hello World 以及关键字

    hello world:(支持函数式编程,不需要放到 class 中) fun main(args: Array<String>) { println("Hello World& ...

  10. 相同内容 yaml 与 json 格式对比

    关联数组: yaml person: name: 张三 age: 24 json { "person": { "name": "张三", . ...