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. SpringtMVC运行流程:@RequestMapping 方法中的 Map、HttpServletRequest等参数信息是如何封装和传递的(源码理解)

    在平时开发SpringtMVC程序时,在Controller的方法上,通常会传入如Map.HttpServletRequest类型的参数,并且可以方便地向里面添加数据.同时,在Jsp中还可以直接使用r ...

  2. Mycat 常用管理命令说明

    Mycat 提供了类似数据库的管理监控方式,可以通过 MySQL 命令行登陆管理端口 9066 执行相应的 SQL 语句进行管理,可以可以通过 JDBC 的方式进行远程连接管理,使用 MySQL 命令 ...

  3. 笔记:XML-解析文档-XPath 定位信息

    如果需要定位某个XML文档中的一段特定信息,那么通过遍历DOM 树的众多节点来进行行查找显得有些麻烦,XPath语言使得访问树节点变得很容易,例如,下面的XML文档结构: <?xml versi ...

  4. 如何通过TortoiseGit(小乌龟)把本地项目上传到github上

    1.第一步: 安装git for windows(链接:https://gitforwindows.org/)一路next就好了, 如果遇到什么问题可以参考我另外一篇文章~^ - ^ 2.第二步:安装 ...

  5. 大数据 --> Kafka集群搭建

    Kafka集群搭建 下面是以三台机器搭建为例,(扩展到4台以上一样,修改下配置文件即可) 1.下载kafka http://apache.fayea.com/kafka/0.9.0.1/ ,拷贝到三台 ...

  6. linux --> 进程和线程

    进程和线程 进程(process)和线程(thread)是操作系统的基本概念,下面用一个类比,来解释它们. 1. 计算机的核心是CPU,它承担了所有的计算任务.它就像一座工厂,时刻在运行. 2. 假定 ...

  7. 21.C++- "++"操作符重载、隐式转换之explicit关键字、类的类型转换函数

    ++操作符重载 ++操作符分为前置++和后置++,比如: ++a;  a++; ++操作符可以进行全局函数或成员函数重载 重载前置++操作符不需要参数 重载后置++操作符需要一个int类型的占位参数 ...

  8. pip遇见的format问题

    这是pip升级以后的问题. DEPRECATION: The default format will switch to columns in the future. You can use –for ...

  9. php正则相关知识点

    关于正则,其实简单就是搜索和匹配.php,java,python等都是支持正则的,php正则兼容perl.好多同学觉得正则比较难,比较抽象,其实正则是非常简单的,主要是一个熟悉和反复练习的结果,还有一 ...

  10. 『备注』&#x; 格式 的编码转换

    在很多 网站(或者很多 WebService), 我们总能看到 Ӓ &#A22A;  这种格式 的编码. 如何将这种编码 转换成 实际文本,C#代码如下: //各种 幺蛾子网页图标 请参见: ...