效果图：

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文本编辑框的实现的更多相关文章

  1. KindEditor富文本编辑框和BeautifulSoup的基本使用

    KindEditor富文本编辑框 1.进入官网 2.下载 官网下载:http://kindeditor.net/down.php 本地下载:http://files.cnblogs.com/files ...

  2. Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全

    导读 行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛.一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器.QLineEdit本身使用方法也很简单,无需过多的设置就能 ...

  3. TTabControl、TMemo组件（制作一个简单的多文本编辑框）

    TTabControl包含一列字符串标签的tabs 每个标签控制一个对象 首先创建一个TForm;接下来添加TTabControl组件和一个文件对话框TOpenDialog(用于添加文件),然后在TT ...

  4. JS的文本编辑框jwysiwyg-0.6

    一款轻量的用js写的文本编辑框.

  5. UEditor富文本编辑框学习

    1.首先需要引入CSS.JS <!--富文本编辑框--> <link href="${pageContext.request.contextPath}/css/plugin ...

  6. 文本框、文本编辑框、按钮——axure线框图部件库介绍

    1. 与文本面板组合设计表单 文本框主要是在设计页面表单的时候,用的最多,通过与文本面板的组合使用,下面我们通过文本面板和文本框设计了一个简单的注册表单 对于,文本框中的文字,只需要双击即可编辑文字 ...

  7. MFC常见问题以及解决方法（1）_MFC下文本编辑框按下回车后窗口退出

    这里主要介绍遇到这种方法的解决方案,解决方法可能有多种,但这里只给出有效的一种,这里不会详细说明出现问题的原因以及为什么这样解决,想了解更多可以百度,写这个主要是防止以后忘记,做个简单的笔记. 问题: ...

  8. 03 EditText文本编辑框

    二  EditText   文本编辑框  父类: TextView     >概念:文本编辑框  可以进行文本编辑         android:textColor="#00f&qu ...

  9. win32: 文本编辑框(Edit)控件响应事件

    过去几年,关于文本编辑框(Edit)控件的响应事件,我都是在主程序 while(GetMessage(&messages, NULL, 0, 0)) { ... } 捕获. 总感觉这种方式让人 ...

随机推荐

  1. JAVA中对事物的理解

    1.事物是一组操作数据的集合动作 (场景:再开发的时候相信大家都遇到主表和子表的插入问题,当主表插入成功时,子表没有插入成功,这时候我们就要把主表的数据回滚,这个时候我们就要用到事物了) 2.一组处理 ...

  2. Silverlight之我见——数据批示（2）

    接着上一回的话题,继续来研究数据批示特性,先拿简单的RageAttribute来弄弄,接着上次的示例,添加一个Age属性,并加上RangeAttribute. [Range(20,60,ErrorMe ...

  3. Python - 模块(一)

    目录 Python - 模块(一) 模块的引用方式 常用模块 random(随机模块) os模块 sys 序列化模块 hashlib subprocess optparse struct Python ...

  4. Python - 面对对象(进阶)

    目录 Python - 面对对象(进阶) 类的成员 一. 字段 二. 方法 三. 属性 类的修饰符 类的特殊成员 Python - 面对对象(进阶) 类的成员 一. 字段 字段包括:普通字段和静态字段 ...

  5. C#关键字详解第二节

    base:基类 在有些书中base的解释为表示父类,没错,base可以表示父类,但我更想理解成基类,因为更原始更具象,既 然是类,那么他就符合面向对象的设计规则和特点,我们知道面向对象的三个特点是封装 ...

  6. unigui的session【1】

    目前是1394. 明白session如何使用管理,看demo Session List和SessionTimeout unit Main; interface uses Windows, Messag ...

  7. [置顶] Git学习总结（1）——Git使用详细教程

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  8. SCU Travel

    Travel The country frog lives in has n towns which are conveniently numbered by 1,2,…,n . Among n(n− ...

  9. fzu 2124

    #include<stdio.h> #include<queue> #include<math.h> #include<algorithm> #incl ...

  10. hdu_1036_Average is not Fast Enough_201311021335

    Average is not Fast Enough! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...