KindEditor文本编辑框的实现
效果图：
kindeditor 是一个插件
下载地址:
https://files-cdn.cnblogs.com/files/lxnlxn/kindeditor.zip
解压后将其放在项目的js文件夹下边，将js/kindEditor/jsp/lib下的jar包放在项目的WEB-INF下的lib中并且Build Path
jsp页面：引入kindeditor插件
<head>
<link rel="stylesheet" href="${basePath}js/kindEditor/themes/default/default.css" />
<link rel="stylesheet" href="${basePath}js/kindEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="${basePath}js/kindEditor/kindeditor.js"></script>
<script charset="utf-8" src="${basePath}js/kindEditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="${basePath}js/kindEditor/plugins/code/prettify.js"></script>
<script >
//文本编辑框
KindEditor.ready(function(K) {
var editor = K.create('textarea[name="supervisionLog.contentText1"]', {
uploadJson : '${basePath}js/kindEditor/jsp/upload_json.jsp',
fileManagerJson : '${basePath}js/kindEditor/jsp/file_manager_json.jsp',
allowFileManager : true, //afterBlur: function(){this.sync();}
//这一句的作用：当失去焦点时执行 this.sync();
//这个函数作用是同步KindEditor的值到textarea文本框。
//官方文档解释：
//sync():将编辑器的内容设置到原来的textarea控件里。
afterBlur : function(){ this.sync();}
//追加处。。。。。：记录输入字数的个数
});
});
</script>
</head>
<tr>
<td>
<font color="red">内容</font>
<textarea id="supervisionLog.contentText1" name="supervisionLog.contentText1" class="ldTextArea" style="width:100%;height:300px;visibility:hidden;" ${readonly}>${supervisionLog.contentText1}</textarea>
</td>
</tr>
//追加处。。。。。：记录输入字数的个数
afterChange: function() {
$('.word_count1').html(this.count()); //字数统计包含HTML代码
$('.word_count2').html(this.count('text')); //字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字
var limitNum = ; //设定限制字数
var pattern = '' + limitNum + '字';
$('.word_surplus').html(pattern); //输入显示
if(this.count('text') > limitNum) {
pattern = ('字数超过限制，请适当删除部分内容');
//超过字数限制自动截取
var strValue = editor.text();
strValue = strValue.substring(,limitNum);
editor.text(strValue);
} else {
//计算剩余字数
var result = limitNum - this.count('text');
pattern = '' + result + '字';
}
$('.word_surplus').html(pattern); //输入显示
}
<p> 还可以输入<span class="word_surplus font12"></span>,您当前输入了 <span class="word_count1 font12"></span> 个文字。(详情：包含HTML代码共： <span class="word_count1 font12"></span> 个文字。 包含纯文本、IMG、EMBED，不包含换行符，共： <span class="word_count2 font12"></span> 个文字。)<br>
</p>
jsp页面：upload_json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.json.simple.*" %> <% /**
* KindEditor JSP
*
* 本JSP程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/ //文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/"; //文件保存目录URL
String saveUrl = request.getContextPath() + "/attached/";
System.out.println(saveUrl);
//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小
long maxSize = ; response.setContentType("text/html; charset=UTF-8"); if(!ServletFileUpload.isMultipartContent(request)){
out.println(getError("请选择文件。"));
return;
}
//检查目录
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
//检查目录写权限
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
} String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if(!extMap.containsKey(dirName)){
out.println(getError("目录名不正确。"));
return;
}
//创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
} FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
//检查文件大小
if(item.getSize() > maxSize){
out.println(getError("上传文件大小超过限制。"));
return;
}
//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + ).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
} SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt() + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
}catch(Exception e){
out.println(getError("上传文件失败。"));
return;
} JSONObject obj = new JSONObject();
obj.put("error", );
obj.put("url", saveUrl + newFileName);
out.println(obj.toJSONString());
}
}
%>
<%!
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", );
obj.put("message", message);
return obj.toJSONString();
}
%>
jsp页面：file_manager_json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.json.simple.*" %>
<% /**
* KindEditor JSP
*
* 本JSP程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/ //根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/attached/";
//图片扩展名
String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"}; String dirName = request.getParameter("dir");
if (dirName != null) {
if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){
out.println("Invalid Directory name.");
return;
}
rootPath += dirName + "/";
rootUrl += dirName + "/";
File saveDirFile = new File(rootPath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
}
//根据path参数，设置各路径和URL
String path = request.getParameter("path") != null ? request.getParameter("path") : "";
String currentPath = rootPath + path;
String currentUrl = rootUrl + path;
String currentDirPath = path;
String moveupDirPath = "";
if (!"".equals(path)) {
String str = currentDirPath.substring(, currentDirPath.length() - );
moveupDirPath = str.lastIndexOf("/") >= ? str.substring(, str.lastIndexOf("/") + ) : "";
} //排序形式，name or size or type
String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name"; //不允许使用..移动到上一级目录
if (path.indexOf("..") >= ) {
out.println("Access is not allowed.");
return;
}
//最后一个字符不是/
if (!"".equals(path) && !path.endsWith("/")) {
out.println("Parameter is not valid.");
return;
}
//目录不存在或不是目录
File currentPathFile = new File(currentPath);
if(!currentPathFile.isDirectory()){
out.println("Directory does not exist.");
return;
} //遍历目录取的文件信息
List<Hashtable> fileList = new ArrayList<Hashtable>();
if(currentPathFile.listFiles() != null) {
for (File file : currentPathFile.listFiles()) {
Hashtable<String, Object> hash = new Hashtable<String, Object>();
String fileName = file.getName();
if(file.isDirectory()) {
hash.put("is_dir", true);
hash.put("has_file", (file.listFiles() != null));
hash.put("filesize", 0L);
hash.put("is_photo", false);
hash.put("filetype", "");
} else if(file.isFile()){
String fileExt = fileName.substring(fileName.lastIndexOf(".") + ).toLowerCase();
hash.put("is_dir", false);
hash.put("has_file", false);
hash.put("filesize", file.length());
hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));
hash.put("filetype", fileExt);
}
hash.put("filename", fileName);
hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
fileList.add(hash);
}
} if ("size".equals(order)) {
Collections.sort(fileList, new SizeComparator());
} else if ("type".equals(order)) {
Collections.sort(fileList, new TypeComparator());
} else {
Collections.sort(fileList, new NameComparator());
}
JSONObject result = new JSONObject();
result.put("moveup_dir_path", moveupDirPath);
result.put("current_dir_path", currentDirPath);
result.put("current_url", currentUrl);
result.put("total_count", fileList.size());
result.put("file_list", fileList); response.setContentType("application/json; charset=UTF-8");
out.println(result.toJSONString());
%>
<%!
public class NameComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return ;
} else {
return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));
}
}
}
public class SizeComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return ;
} else {
if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {
return ;
} else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {
return -;
} else {
return ;
}
}
}
}
public class TypeComparator implements Comparator {
public int compare(Object a, Object b) {
Hashtable hashA = (Hashtable)a;
Hashtable hashB = (Hashtable)b;
if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
return -;
} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
return ;
} else {
return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));
}
}
}
%>
KindEditor文本编辑框的实现的更多相关文章
- KindEditor富文本编辑框和BeautifulSoup的基本使用
KindEditor富文本编辑框 1.进入官网 2.下载 官网下载:http://kindeditor.net/down.php 本地下载:http://files.cnblogs.com/files ...
- Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全
导读 行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛.一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器.QLineEdit本身使用方法也很简单,无需过多的设置就能 ...
- TTabControl、TMemo组件（制作一个简单的多文本编辑框）
TTabControl包含一列字符串标签的tabs 每个标签控制一个对象 首先创建一个TForm;接下来添加TTabControl组件和一个文件对话框TOpenDialog(用于添加文件),然后在TT ...
- JS的文本编辑框jwysiwyg-0.6
一款轻量的用js写的文本编辑框.
- UEditor富文本编辑框学习
1.首先需要引入CSS.JS <!--富文本编辑框--> <link href="${pageContext.request.contextPath}/css/plugin ...
- 文本框、文本编辑框、按钮——axure线框图部件库介绍
1. 与文本面板组合设计表单 文本框主要是在设计页面表单的时候,用的最多,通过与文本面板的组合使用,下面我们通过文本面板和文本框设计了一个简单的注册表单 对于,文本框中的文字,只需要双击即可编辑文字 ...
- MFC常见问题以及解决方法（1）_MFC下文本编辑框按下回车后窗口退出
这里主要介绍遇到这种方法的解决方案,解决方法可能有多种,但这里只给出有效的一种,这里不会详细说明出现问题的原因以及为什么这样解决,想了解更多可以百度,写这个主要是防止以后忘记,做个简单的笔记. 问题: ...
- 03 EditText文本编辑框
二 EditText 文本编辑框 父类: TextView >概念:文本编辑框 可以进行文本编辑 android:textColor="#00f&qu ...
- win32: 文本编辑框(Edit)控件响应事件
过去几年,关于文本编辑框(Edit)控件的响应事件,我都是在主程序 while(GetMessage(&messages, NULL, 0, 0)) { ... } 捕获. 总感觉这种方式让人 ...
随机推荐
- 在vue中通过js动态控制图片按比列缩放
1.html 通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸.外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸.一种是宽度大于高度的情况, ...
- 【剑指Offer】66、机器人的运动范围
题目描述: 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时 ...
- poj3176-Cow Bowling【dp】
The cows don't use actual bowling balls when they go bowling. They each take a number (in the range ...
- 使用IDM下载软件下载百度云网盘里的资源，以Chrome浏览器为例
1.下载安装最新版的Chrome浏览器,我是在腾讯软件下载中心下载的,使用普通下载,下载地址:https://dl.softmgr.qq.com/original/Browser/72.0.3626. ...
- 基于requests模块的cookie,session和线程池爬取
目录 基于requests模块的cookie,session和线程池爬取 基于requests模块的cookie操作 基于requests模块的代理操作 基于multiprocessing.dummy ...
- Python基础-奇偶判断调用函数
编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数 1/1+1/3+...+1/n. 首先写一个n为偶数的函数: def peven(n): s = 0 ...
- 关于单片机编程里面调用sprintf死机的解决方法及原因分析
好久之前的做的笔记,这里贴出. char String[100];//直接用数组代替指针即可解决 下面代代码下载至单片机中,发现会出现单片机死机问题 #include "stdio.h&qu ...
- hdu 4280
题意:求XY平面上最左边的点到最右边的点的最大流. 分析:数据量大,EK算法TLE,要用SAP算法.SAP算法用的是 http://www.cnblogs.com/kuangbin/archive/2 ...
- Linux I/O scheduler for solid-state drives
An I/O scheduler and a method for scheduling I/O requests to a solid-state drive (SSD) is disclosed. ...
- N天学习一个linux命令之du
用途 统计文件或者目录占用硬盘空间大小 用法 du [OPTION] [FILE]du [OPTION] --files0-from=F 常用参数 -a, --all统计所有文件,不仅仅是目录 -b, ...