文本编辑器(KindEditord)
1、下载
- 官网下载：http://kindeditor.net/down.php
- 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip
2、文件夹说明
├── 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、基本使用
<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))
view.py
urlpatterns = [
#上传图片，写文章
url(r'^test/', views.test),
#查看写的文章
url(r'^see/', views.see),
#上传图 视频 文件
url(r'^upload_img.html', views.upload_img),
urls.py
<!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
文本编辑器(KindEditord)的更多相关文章
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
- 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
- 关于SMARTFORMS文本编辑器出错
最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...
- 基于trie树的具有联想功能的文本编辑器
之前的软件设计与开发实践课程中,自己构思的大作业题目.做的具有核心功能,但是还欠缺边边角角的小功能和持久化数据结构,先放出来,有机会一点点改.github:https://github.com/chu ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)
Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义: 文本:由0个或 ...
- Bzoj1269 [AHOI2006]文本编辑器editor
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3678 Solved: 1380 Description 这些日子,可可不和卡卡一起玩了,原来可可正 ...
- PHP Ueditor 富文本编辑器
2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...
- js中的文本编辑器控件KindEditor---那些打酱油的日子
使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...
随机推荐
- 基于 Hexo + GitHub Pages 搭建个人博客（二）
在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...
- Python上下文管理器
在Python中让自己创建的函数.类.对象支持with语句,就实现了上线文管理协议.我们经常使用with open(file, "a+") as f:这样的语句,无需手动调用f.c ...
- 1-4 criteria用法大全
Criteria的完整用法 QBE (Query By Example) Criteria cri = session.createCriteria(Student.class); cri.add(E ...
- MySQL数据库学习四 存储引擎和数据类型
4.1存储引擎 1. 查看MySQL DBMS所支持的存储引擎 SHOW ENGINES;
- SAS9.2的增强编辑器注册解决方案
系统环境:Win10,64位,SAS9.2破解版 问题: 原win7换成win10后,重装SAS9.2,增强编辑器无法使用. 解决方案: 方案一: 点击"视图"-选择程序编辑器,这 ...
- 【Python】 list & dict & str
list & dict & str 这三种类型是python中最常用的几种数据类型.他们都是序列的一种 ■ 序列通用操作 1. 分片 s[a:b] 返回序列s中从s[a]到s[b- ...
- 设计模式 --> MVC，MVP 和 MVVM 的图示
MVC,MVP 和 MVVM 的图示 复杂的软件必须有清晰合理的架构,否则无法开发和维护.MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用. 一.MVC M ...
- Matlab绘图基础——用print函数保存图片(Print figure or save to file)
print(figure_handle,'formats','-rnumber','filename') %将图形保存为png格式,分辨率为number的(默认为72),最好指定的分辨率大一点,否则 ...
- 微信公众平台开发，模板消息，网页授权，微信JS-SDK，二维码生成（4）
微信公众平台开发,模板消息,什么是模板消息,模板消息接口指的是向用户发送重要的服务通知,只能用于符合场景的要求中去,如信用卡刷卡通知,购物成功通知等等.不支持广告营销,打扰用户的消息,模板消息类有固定 ...
- cocos对lua代码加密
1.0 cocos luacompile 用法 我用的普通的cocos2d lua,没用quick,quick好像可以对整个资源包括图像和音频都加密,打包成zip.但我没用quick.看了下luaco ...