python 文本编辑器(KindEditord)

1、下载

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

2、文件夹说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── 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主题

3、基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<textarea name="content" id="content"></textarea>
  
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    $(function () {
        initKindEditor();
    });
  
    function initKindEditor() {
        var kind = KindEditor.create('#content', {
            width: '100%',       // 文本框宽度(可以百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400      // 最小高度（数字）
        });
    }
</script>

4、详细参数

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

5、上传文件本质：上传图片时,点击上传 会默认帮你生成ifrem和form标签,然后在form标签里生成一个image标签，以Ajax方式发送到后台(伪Ajax)

CONIENT = ""

def test(request):

    if request.method == "GET":

        return render(request,"test.html")

    else:

        content = request.POST.get("content")

        global CONIENT

        CONIENT = content

        print(content)

        return HttpResponse("...")

def see(request):

    return render(request,"see.html",{"con":CONIENT})

import os

def upload_img(request):

    #在之后可以根据获取到的dir判断是视频还是文件，这里没有用到

    type_obj = request.POST.get("dir")

    print(request.POST, request.FILES)

    file_obj = request.FILES.get("imgFile")

    file_path = os.path.join("static/images/",file_obj.name)

    with open(file_path,"wb") as f:

        for chunk in file_obj.chunks():

            f.write(chunk)

    #返回前端,可以预览

    dic = {

        'error': 0,

        'url': "/" +  file_path,

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

    }

    import json

    return HttpResponse(json.dumps(dic))

Views

urlpatterns = [

    #上传图片，写文章

    url(r'^test/', views.test),

    #查看写的文章

    url(r'^see/', views.see),

    #上传图  视频 文件

    url(r'^upload_img.html', views.upload_img),
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="POST" action="/test/">

        {% csrf_token %}

        <div>

            <div>文章内容</div>

            <div>

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

            </div>

        </div>

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

    </form>

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

    <script>

        KindEditor.create("#id1",{

            width:"700px",

            height:"800px",

{#            //items:['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',#}

             //       'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

              //      'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

                //    'superscript', 'clearhtml', 'quickformat'],

            //noDisableItems:['source', '|', 'undo'],     //保留某些item

            //designMode:false                            //其它注释

           //resizeType   改变窗口大小

            uploadJson:"/upload_img.html",  //上传文件

            extraFileUploadParams:{         //上传文件时携带token

                "csrfmiddlewaretoken":"{{ csrf_token }}"

            }

        })

    </script>

</body>

</html>

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    {{ con | safe }}

</body>

</html>

see.html

python KindEditord的更多相关文章

  1. python学习目录(转载)

    python基础篇 python 基础知识    python 初始python    python 字符编码    python 类型及变量    python 字符串详解 python 列表详解 ...

  2. python之路1

    python之路 http协议 html HTML2 CSS选择器 CSS属性操作 CSS属性操作/下 JavaScript(js)/上 JavaScript的对象 JavaScript的对象/下 前 ...

  3. Python中的多进程与多线程（一）

    一.背景 最近在Azkaban的测试工作中,需要在测试环境下模拟线上的调度场景进行稳定性测试.故而重操python旧业,通过python编写脚本来构造类似线上的调度场景.在脚本编写过程中,碰到这样一个 ...

  4. Python高手之路【六】python基础之字符串格式化

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  5. Python 小而美的函数

    python提供了一些有趣且实用的函数,如any all zip,这些函数能够大幅简化我们得代码,可以更优雅的处理可迭代的对象,同时使用的时候也得注意一些情况   any any(iterable) ...

  6. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  7. 可爱的豆子——使用Beans思想让Python代码更易维护

    title: 可爱的豆子--使用Beans思想让Python代码更易维护 toc: false comments: true date: 2016-06-19 21:43:33 tags: [Pyth ...

  8. 使用Python保存屏幕截图（不使用PIL）

    起因 在极客学院讲授<使用Python编写远程控制程序>的课程中,涉及到查看被控制电脑屏幕截图的功能. 如果使用PIL,这个需求只需要三行代码: from PIL import Image ...

  9. Python编码记录

    字节流和字符串 当使用Python定义一个字符串时,实际会存储一个字节串: "abc"--[97][98][99] python2.x默认会把所有的字符串当做ASCII码来对待,但 ...

随机推荐

  1. Centos搭建开发环境，PHP7+ Nginx1.12+ Mysql5.7

    1.更新yum源 yum -y update 2. 安装 epel-release yum install epel-release -y 检测安装成功:yum search nginx  结果含有: ...

  2. 我的linux学习之路——（一）

    prompt:命令提示符 命令: command options...... arguments...... 选项: 短选项 长选项 带参数的选项 参数: list----ls 列出,列表 列出制定路 ...

  3. 使用 win10 的正确姿势

    17年9月初,写了第一篇<使用 win10 的正确姿势>,而现在半年多过去,觉得文章得更新一些了,索性直接来个第二版吧. -----2018.3.24 写 一. 重新定义桌面 我的桌面: ...

  4. Object.prototype.hasOwnProperty与Object.getOwnPropertyNames

    Object.prototype.hasOwnProperty() 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法.这个方法可以用来检测一个对象是否含有特定的自身属性: ...

  5. Algorithm --> n位数去掉k位后找最小数

    去掉K位求取最小数 一个n位的数,去掉其中的k位,怎样使留下来的(n-k)位数按原来的前后顺序组成的数最小 例如 8314925去掉4个数,留下125最小,注意有前后顺序要求,要是没有顺序当然是123 ...

  6. 痛吻过YY寻找到真爱的三非渣本春招之路

    写下这篇文章可能就不是大家乐于见闻的面经了,更多是深入一些面试细节. 前言 我猜拿到了BAT等一线互联网公司Offer的小伙伴或者那些老鸟看到这条标题的时候会不屑一顾,认为YY这种级别的公司是属于二线 ...

  7. 基于node写了个工具，可以在线制作“sorry，为所欲为”的 GIF(开源)

    SnailDev.GifMaker 一个生成gif并添加自定义字幕的工具 client 微信小程序 server nodejs + express 欢迎 star&fork 如果您有好的com ...

  8. 关于php日期前置是否有0

    例如:2018-01-04,这个日期和月份前置是有0 如果不想有0,date( 'y-n-j',time() ):默认的是date( 'y-m-d',time() ),这个日期和月份前置是有0. da ...

  9. JavaScript(第十五天)【匿名函数和闭包】

      学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂.(所需基础15章的时候已经声明 ...

  10. android 与 服务器通信

    android 与 服务器通信 服务端代码: (1)control 层 /** * 用户登录 * @return */ @RequestMapping(value = "/login&quo ...