有时项目中需要引入富文本框(这里我简单的写一下使用步骤)
一、1、在工程wapapp下面建一个文件plugins(名字自己定为了放 kindeditor-4.1.10文件)将kindeditor-4.1.10放入该文件下
下载地址:http://download.pchome.net/design/homepage/download-170038.html
2、建一个jsp页面,代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="plugins/kindeditor-4.1.10/themes/default/default.css">
<link rel="stylesheet" href="plugins/kindeditor-4.1.10/plugins/code/prettify.css">
<script charset="utf-8" type="text/javascript" src="plugins/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" type="text/javascript" src="plugins/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8" type="text/javascript" src="plugins/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script type="text/javascript">
KindEditor.ready(function(K){
var editor1= K.create('textarea[id="context"]',{
cssPath : 'plugins/kindeditor-4.1.10/plugins/code/prettify.css',
uploadJson : 'plugins/kindeditor-4.1.10/jsp/upload_json.jsp',
fileManagerJson : 'plugins/kindeditor-4.1.10/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
}
});
prettyPrint();
})
</script>
</head>
<body>
<form action="#" method="post">
<textarea rows="20" cols="50" id="context">这是富文本框</textarea>
</form>
</body>
</html>
其中文本框的宽、高都能设置,具体可以看下载下来的 kindeditor-4.1.10 的文档说明
3、其中jsp文件下面的:jsp/file_manager_json.jsp
//根目录路径,可以指定绝对路径,比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";
//根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/attached/";
其中attached 必须存在(可以在webapp底下新建一个attached )
4、在地址栏输入就行
http://localhost:8080/test5/kindeditorTest1.jsp