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. 【前端单元测试入门05】react的单元测试之jest

    jest jest是facebook推出的一款测试框架,集成了前面所讲的Mocha和chai,jsdom,sinon等功能. 安装 npm install --save-dev jest npm in ...

  2. python全栈开发-Day6 字符编码

    python全栈开发-Day6 字符编码 一 .了解字符编码的知识储备 一 .计算机基础知识 二 .文本编辑器存取文件的原理(nodepad++,pycharm,word) #1.打开编辑器就打开了启 ...

  3. Django+xadmin打造在线教育平台（四）

    七.授课机构功能 7.1.模板继承 (1)创建母板 把org-list.html拷贝到templates目录下,新建base.html,剪切org-list.html内容到里面 再修改一下静态文件的地 ...

  4. 【Flask】 项目结构说明

    项目结构 Flask的一大优势就是其极其轻量化.但是也需要注意到,如果我们要用Flask做一个大项目的话,把所有代码写在一个文件里肯定是不合适的.非常难以维护.但是和Django这种框架又不一样,Fl ...

  5. Java多线程：队列与阻塞队列

    1. 什么是阻塞队列 阻塞队列(BlockingQueue)是 Java 5 并发新特性中的内容,阻塞队列的接口是 java.util.concurrent.BlockingQueue,它提供了两个附 ...

  6. /etc/nginx/nginx.conf配置文件详解

    user nginx; #数值和cpu核数个数一致worker_processes 8; #worker与cpu绑定 worker_cpu_affinity 0001 0010 0100 1000 1 ...

  7. 如何打包静态库.a文件 iOS

    代码调试好了开始打包成sdk,下面是将要打包的FRSDK代码(FRSDK.h暴露在外面有别人调用) 1.创建新工程(Xcode File-New-Project) 2.把下面的红色框的东西移除 3.将 ...

  8. js版九宫格拼图与启发式搜索（A*算法）

    九宫格拼图游戏大家都很熟悉,这里给大家如介绍何应用状态空间搜索的方式求解拼图的最佳路径和一个游戏dome及自动求解方法: 本文分web版游戏的实现和启发式搜索算法两部分: 先看dome,直接鼠标点击要 ...

  9. 读论文系列：Object Detection CVPR2016 YOLO

    CVPR2016: You Only Look Once:Unified, Real-Time Object Detection 转载请注明作者:梦里茶 YOLO,You Only Look Once ...

  10. beta冲刺总结

    前言: 经过一周的努力,对alpha版本进行不断的更新,得到了beta版本. 主要成员介绍: 成员 性格 优点 缺点 主要工作 黄紫仪 努力奋斗型 努力奋斗,爱学习 爱吐槽 功能点修改和部分界面修改, ...