文本编辑器(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. ...
随机推荐
- java语言与jvm虚拟机简介
一.java语言 1.1 支持面向对象编程oop 强调支持,因为java同样可以面向过程编程. oop的三大特性是:封装.继承.多态. 封装主要针对成员变量而言,oop的思想要求成员变量均为私有,不应 ...
- linux kexec内核引导
linux kexec 介绍 kexec的功能是用一个运行的内核去运行一个新内核,就像运行一个应用程序一样.这种机制因为跳过了bootloader,可以实现系统的快速重启.另外kdump也是基于kex ...
- delphi 数组复制利用CopyMemory 最为完美
在各网站的文章里面,见复制数据的方法中,有move的,有system.copy的,而要实际应用中,这两种方法,并不是很完美,会遇到一些问题,比如copy在记录里面的复制时,编译都过不去,而CopyMe ...
- git将文件托管到github上遇到的问题
先来一问题描述: 执行:$ git push -u origin master 结果Warning: Permanently added the RSA host key for IP address ...
- MySQL数据库学习四 存储引擎和数据类型
4.1存储引擎 1. 查看MySQL DBMS所支持的存储引擎 SHOW ENGINES;
- redhat7.2静默安装Oracle11.2.0.4
redhat7.2静默安装Oracle11.2.0.4我们将oracle安装到/opt/oracle目录下,后面的环境变量则以此为基础.一.设置主机hosts映射vi /etc/hosts[plain ...
- linux --> fork()详解
fork()详解 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个 ...
- 【django之stark组件】
一.需求 仿照django的admin,开发自己的stark组件.实现类似数据库客户端的功能,对数据进行增删改查. 二.实现 1.在settings配置中分别注册这三个app # Applicatio ...
- Java虚拟机之GC
⑴背景 Java堆和方法区实现类所需内存是不一样的,每个方法的多分支需要的内存也可能不一样,我们只有在运行期间才能制动创建哪些对象.这部分内存分配与回收都是动态的,而垃圾回收器所关注的就是这些这部分内 ...
- java 中的JDK封装的数据结构和算法解析（集合类）----顺序表 List 之 ArrayList
1. 数据结构之List (java:接口)[由于是分析原理,这里多用截图说明] List是集合类中的容器之一,其定义如下:(无序可重复) An ordered collection (also kn ...