Day24-KindEditor基本使用和文件操作2
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。
1. 准备
2. 写一个kind的URL，定义函数，写前端页面
kind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width:500px;margin:0 auto">
<textarea id="content"></textarea>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
<script>
$(function(){
KindEditor.create('#content',{});
})
</script>
</body>
</html>
页面效果：
3. 通过把下列参数写到字典中，来调整个性化页面。
详细参数可以参考：http://kindeditor.net/docs/option.html
3.1 详解items参数
效果：
3.2 用 noDisableItems 可以让某些图标能看到，但是不能操作。
3.3 文件上传---uploadJson
发现上传文件的时候，默认是提交到某一个固定的URL。（如下）
通过uploadJson可以自定制上传到哪里
效果：
对应地，我们应该在URL中添加upload_img路径。
3.4 拿到上传的文件以后，应该保存并且返回给用户。
这里省略了保存的过程，直接把图片放到这个目录下进行下一步。
views.py
def kind(request):
return render(request,'kind.html') def upload_img(request):
#在这里需要接收文件并且保存，然后返回给用户。是以POST方式提交的。在这里没有写保存的范本。
print(request.FILES)
import json
dic={
'error':0, #0代表是正确的,1代表是错误的。
'url':'/static/imgs/1.png', ##把静态文件的路径返回到URL这里，所以在页面上就可以做预览了。
'message':'错误了...' } return HttpResponse(json.dumps(dic))
页面效果：点击上传图片以后就可以预览了。在内部用的是iframe+form
4. allowImageUpload: false（不允许），true（允许） 是否允许图片上传。
allowImageRemote: 是否允许远程的图片上传。
5. autoHeightMode: true 自动增加高度
6. fileManagerJson:'/file_manager/' 文件管理的路径
allowFileManager:true 文件管理
7. extraFileUploadParams: 上传照片的时候，加上额外的参数（CSRF_TOKEN）
filePostName: 指定上传文件form的名称。
8. 增加文件空间管理的模块
9. XSS特殊字符的过滤
Day24-KindEditor基本使用和文件操作2的更多相关文章
- kindeditor 上传下载文件
jsp代码 1 <script type="text/javascript" src="${pageContext.request.contextPath}/kin ...
- 【.NET深呼吸】Zip文件操作（1）：创建和读取zip文档
.net的IO操作支持对zip文件的创建.读写和更新.使用起来也比较简单,.net的一向作风,东西都准备好了,至于如何使用,请看着办. 要对zip文件进行操作,主要用到以下三个类: 1.ZipFile ...
- 野路子出身PowerShell 文件操作实用功能
本文出处:http://www.cnblogs.com/wy123/p/6129498.html 因工作需要,处理一批文件,本想写C#来处理的,后来想想这个是PowerShell的天职,索性就网上各种 ...
- Node基础篇（文件操作）
文件操作 相关模块 Node内核提供了很多与文件操作相关的模块,每个模块都提供了一些最基本的操作API,在NPM中也有社区提供的功能包 fs: 基础的文件操作 API path: 提供和路径相关的操作 ...
- 归档NSKeyedArchiver解归档NSKeyedUnarchiver与文件管理类NSFileManager （文件操作）
========================== 文件操作 ========================== 一.归档NSKeyedArchiver 1.第一种方式:存储一种数据. // 归档 ...
- SQL Server附加数据库报错：无法打开物理文件,操作系统错误5
问题描述: 附加数据时,提示无法打开物理文件,操作系统错误5.如下图: 问题原因:可能是文件访问权限方面的问题. 解决方案:找到数据库的mdf和ldf文件,赋予权限即可.如下图: 找到mdf ...
- 通过cmd完成FTP上传文件操作
一直使用 FileZilla 这个工具进行相关的 FTP 操作,而在某一次版本升级之后,发现不太好用了,连接老是掉,再后来完全连接不上去. 改用了一段时间的 Web 版的 FTP 工具,后来那个页面也 ...
- Linux文件操作的主要接口API及相关细节
操作系统API: 1.API是一些函数,这些函数是由linux系统提供支持的,由应用层程序来使用,应用层程序通过调用API来调用操作系统中的各种功能,来干活 文件操作的一般步骤: 1.在linux系统 ...
- C语言的fopen函数（文件操作/读写）
头文件:#include <stdio.h> fopen()是一个常用的函数,用来以指定的方式打开文件,其原型为: FILE * fopen(const char * path, c ...
- Python的文件操作
文件操作,顾名思义,就是对磁盘上已经存在的文件进行各种操作,文本文件就是读和写. 1. 文件的操作流程 (1)打开文件,得到文件句柄并赋值给一个变量 (2)通过句柄对文件进行操作 (3)关闭文件 现有 ...
随机推荐
- MVC的BundleConfig应用
1.MVC可以通过BundleConfig类来配置css和js的统一引用,分别通过StyleBundle和ScriptBundle来创建. 2.可以在母版页中统一加载设置在BundleConfig.c ...
- 20155304《网络对抗》Exp2 后门原理与实践
20155332<网络对抗>Exp2 后门原理与实践 实验内容 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Sh ...
- What's new in XAML of .NET 4.0（ .NET 4.0中XAML的新功能 ）
原文 What's new in XAML of .NET 4.0 What's new in XAML of .NET 4.0 Easy Object References with {x:Refe ...
- Android开发——RecyclerView特性以及基本使用方法（二）
0. 前言 随着Android的发展,虽然ListView依旧重要,但RecyclerView确实越来越多的被大家使用.但显然并不能说RecyclerView就一定优于ListView,而是应该根据 ...
- SQL面试整理（1）——数据库连接池
在web开发中,如果JSP.Servlet或EJB使用JDBC直接访问数据库,每一次数据访问请求都必须经历建立数据库连接,打开数据库,存取数据库和关闭数据库连接等操作步骤,如果频繁发生这种数据库操作, ...
- 利用Python统计微信联系人男女比例以及简单的地区分布
寒暄的话不多说,直接进入主题. 运行效果图: [准备环境] Python版本:v3.5及其以上 开发工具:随意,此处使用Pycharm [依赖包] 1.itchat (CMD运行:pip instal ...
- 【第八课】php-fpm.conf配置文件解析
在discuz论坛的nginx配置文件当中,我们可以看到有一段php解析的配置,如下: location ~ \.php$ { try_files $uri = 404; fastcgi_pass 1 ...
- django请求的生命周期
1. 概述 首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串. 在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页中. Django的请求生命周期是指当用户 ...
- R绘图 第九篇：绘制散点图和气泡图（ggplot2）
绘制散点图(scatterplots)使用geom_point()函数,气泡图(bubblechart)也是一个散点图,只不过点的大小由一个变量(size)来控制.散点图潜在的最大问题是过度绘图:当一 ...
- 数位DP模板详解
// pos = 当前处理的位置(一般从高位到低位) // pre = 上一个位的数字(更高的那一位) // status = 要达到的状态,如果为1则可以认为找到了答案,到时候用来返回, // 给计 ...