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. webpack打包多html开发案例

    简单说明: 1,案例没有使用devserver,所以不能实时查看 2,案例是将src下面的html.css.js分别进行处理 3,多html的规律是需要有多个entry,每个html一个entry,当 ...

  2. Linux的压缩/解压缩文件处理 zip & unzip

    Linux的压缩/解压缩命令详解及实例 压缩服务器上当前目录的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前目录 unzip filename.zip 另:有些服 ...

  3. 增加响应header让ajax支持跨域

    ajax请求数据步骤 发送请求--->浏览器接受响应--->判断是否是同域下 是的话,就把响应数据返回给ajax.不是的话就提醒禁止跨域请求. 现在可以在响应头重增加 header(&qu ...

  4. MVC 中创建自己的异常处理

    1.新建类一个类继承 HandleErrorAttribute 类把异常书写到队列中 public class MyExceptionAttribute: HandleErrorAttribute { ...

  5. .net下使用NPOI读取Excel表数据

    这里只写MVC下的情况 public ActionResult Index() { var path = Server.MapPath(@"/content/user.xlsx") ...

  6. BZOJ 2190 仪仗队(线性筛欧拉函数)

    简化题意可知,实际上题目求得是gcd(i,j)=1(i,j<=n)的数对数目. 线性筛出n大小的欧拉表,求和*2+1即可.需要特判1. # include <cstdio> # in ...

  7. 【uoj#174】新年的破栈 贪心

    题目描述 给你一个长度为 $n$ 的序列和一个空的双端队列,每次进行3种操作种的一种: 1.将序列中编号最小的数加入到双端队列的队尾:2.从双端队列的队尾取出一个数:3.从双端队列的队头取出一个数. ...

  8. selenium学习网址

    1.http://www.testclass.net/selenium_java/#      testclass网址 2.http://www.yiibai.com/selenium/seleniu ...

  9. （转）REST无状态的理解

    转至http://lelglin.iteye.com/blog/1852092 Representational State Transfer的缩写.我对这个词组的翻译是"表现层状态转化&q ...

  10. 浅谈FFT&NTT

    复数及单位根 复数的定义大概就是:\(i^2=-1\),其中\(i\)就是虚数单位. 那么,在复数意义下,对于方程: \[ x^n=1 \] 就必定有\(n\)个解,这\(n\)个解的分布一定是在复平 ...