Django之kindeditor

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的更多相关文章

django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
Django（九）下：Ajax操作、图片验证码、KindEditor使用
三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...
Django 中使用kindeditor
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
Python开发【Django】：图片验证码、KindEditor
图片验证码生成图片验证码需要以下: session check_code.py(依赖:Pillow,字体文件) 模块安装 pip install Pillow src属性后面加? 在utils下拷贝 ...
python笔记-20 django进阶（model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...
django admin富文本编辑kindeditor
最近在做django项目,需要在后台管理系统加入富文本编辑其实加入富文本编辑很简单,就是导入几个编辑器的js脚本到admin页面内,下面说说怎么做第一步,下载想要的富文本编辑器如kindedito ...
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 ...
Django项目开发，XSS攻击，图片防盗链，图片验证码，kindeditor编辑器
目录一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...

随机推荐

HDU 2113 Secret Number
http://acm.hdu.edu.cn/showproblem.php?pid=2113 Problem Description 有一天, KIKI 收到一张奇怪的信, 信上要KIKI 计算出给定 ...
使用fabric1.14.0和fabric2.4.0
fabric1.14.0(支持Python2.5-2.7版本): from fabric.api import * env.gateway = '192.168.181.2' ...
TTPPRC —— 商业分析模型
欢迎讨论 : ) 前言1 TTPPRC,是一个为了更容易.透切地进行商业分析而整理出的分析模型.通过这个模型,可以让不具备专业商业知识的大众都能容易得出商业分析结果. 此文是读者阅读原文后,而整理的一 ...
第148天：js+rem动态计算font-size的大小，适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
【poj2409】Let it Bead Polya定理
题目描述用 $c$ 种颜色去染 $r$ 个点的环,如果两个环在旋转或翻转后是相同的,则称这两个环是同构的.求不同构的环的个数. $r·c\le 32$ . 题解 Polya定理 Burnside引理 ...
bug:margin塌陷
margin塌陷:两个嵌套的div,内部div的margin-top失效,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值. 弥补方法: 1 ...
linux系统常见命令以及操作
2.安装xshell,安装完打开,配置回话,输入名称(随便).SSH.主机(打开linux,点击右上角电脑图标system etho进行联网,打开终端输入ifconfig回车,找到inet add地址 ...
【BZOJ1176】Mokia（CDQ分治）
[BZOJ1176]Mokia(CDQ分治) 题面 BZOJ权限题啊,,,, dbzoj真好 Description 维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的 ...
BZOJ1997 [Hnoi2010]Planar 【2-sat】
题目链接 BZOJ1997 题解显然相交的两条边不能同时在圆的一侧,$2-sat$判一下就好了但这样边数是$O(m^2)$的,无法通过此题但是$n$很小,平面图边数上界为\(3n ...
20135239 益西拉姆 linux内核分析使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
https://drive.wps.cn/preview#l/759e32d65654419cb765da932cdf5cdc 本次直接在wps上写的,因为不能连同图片一起粘贴过来,一个一个粘比较费时 ...

Django之kindeditor

Django之kindeditor的更多相关文章

随机推荐

热门专题