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)) { ... } 捕获. 总感觉这种方式让人 ...
随机推荐
- 如何让 HTML 识别 string 里的 '\n' 并成功换行
只要在结果所在的 div 的 css 设置: white-space: pre-line; 然后页面就能成功识别 '\n' 并整齐的显示结果了.
- Labview学习笔记（三）
一.数据 1.数值控件 (1)数值控件 根据不同的模拟状态,放置不同控件 (2)显示格式 为了程序显示,需要设置数值型控件的表示法.数值范围.显示格式等属性. 一般来说,长度越长,则可以表示的数值范围 ...
- 栈和队列问题：设计一个有 getMin 功能的栈
[知识点] 栈是一个先进后出(FILO-First In Last Out)的数据结构,队列是一种先进先出(FIFO-First In First Out)的数据结构. [题目] 实现一个特殊的栈,在 ...
- 如何在redhat 7上安装VNC服务器
平时我们基本上都是用xshell或者用putty远程我们的linux服务器,如果我们的linux服务器安装了图型化界面那我们又该如何远程使用我们的图形化界面呢?下面我们用vnc来实现远程我们的linu ...
- PAT 1047. Student List for Course
Zhejiang University has 40000 students and provides 2500 courses. Now given the registered course li ...
- 303. Range Sum Query - Immutable(动态规划）
Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...
- 1.1 Java程序设计平台
Java并不只是一种语言.在此之前出现的那么多中语言也没有能够引起那么大的轰动.Java是一个完整的平台,有一个庞大的库,其中包含了很多可重用的代码和一个提供诸如安全性.跨操作系统的可移植性以及自动垃 ...
- qwb与小数
qwb与小数 Time Limit: 1 Sec Memory Limit: 128 MB Description qwb遇到了一个问题:将分数a/b化为小数后,小数点后第n位的数字是多少? 做了那 ...
- 使用applescript脚本方式以管理员权限运行
- (BOOL) runProcessAsAdministrator:(NSString*)scriptPath withArguments:(NSArray ...
- nyoj_91_阶乘之和_201312131321
阶乘之和 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为正数)的阶乘之和,如9 ...