zoukankan      html  css  js  c++  java

  • 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="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 = 200000;  //设定限制字数
                var pattern = '' + limitNum + '字'; 
                $('.word_surplus').html(pattern); //输入显示
                if(this.count('text') > limitNum) {
                    pattern = ('字数超过限制，请适当删除部分内容');
                    //超过字数限制自动截取
                    var strValue = editor.text();
                    strValue = strValue.substring(0,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">0</span> 个文字。(详情：包含HTML代码共： <span class="word_count1 font12">0</span> 个文字。 包含纯文本、IMG、EMBED，不包含换行符，共： <span class="word_count2 font12">0</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 = 1000000;

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(".") + 1).toLowerCase();
        if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
            out.println(getError("上传文件扩展名是不允许的扩展名。
只允许" + extMap.get(dirName) + "格式。"));
            return;
        }

        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
        String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + 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", 0);
        obj.put("url", saveUrl + newFileName);
        out.println(obj.toJSONString());
    }
}
%>
<%!
private String getError(String message) {
    JSONObject obj = new JSONObject();
    obj.put("error", 1);
    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(0, currentDirPath.length() - 1);
    moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";
}

//排序形式，name or size or type
String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";

//不允许使用..移动到上一级目录
if (path.indexOf("..") >= 0) {
    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(".") + 1).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 -1;
        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
            return 1;
        } 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 -1;
        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
            return 1;
        } else {
            if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {
                return 1;
            } else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {
                return -1;
            } else {
                return 0;
            }
        }
    }
}
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 -1;
        } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
            return 1;
        } else {
            return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));
        }
    }
}
%>
  • 相关阅读:
    c c++ 混合编译
    vlc sdl 播放视频可随窗口改变大小
    exec函数族的使用
    gcc编译器命令使用详解
    linux gcc 编译时头文件和库文件搜索路径
    VLC1.2 播放视频迟滞卡
    Ubuntu 中软件的安装、卸载以及查看的方法总结
    SDL2.0 VLC ubuntu安装和黑屏问题
    linux动态库与静态库混合连接
    FFMEPG -- A ffmpeg and SDL Tutorial : tutorial05
  • 原文地址：https://www.cnblogs.com/lxnlxn/p/10240186.html
Copyright © 2011-2022 走看看