kindeditor富文本编辑器的使用入门-优快云博客

kindeditor富文本编辑器的使用

Kindeditor编辑器很好用，可以所见即所得，可以拷贝word内容到编辑框。
支持本地附件上传。。。

一、创建dynamic web project 项目名称test_kindeditor
下载kindeditor.zip并解压，将kindeditor文件夹拷贝到WebContent目录
拷贝WebContent/kindeditor/jsp/lib下的jar包到WebContent/WEB-INF/lib下
jar包包括：commons-fileupload.jar、commons-io.jar、json_simple.jar

二、创建WebContent/index.jsp文件
将WebContent/kindeditor/jsp/demo.jsp内容拷贝进index.jsp

三、修改js和css的引用路径，推荐使用相对路径。
添加java语句：<%String path = request.getContextPath(); %>
path代表的就是项目根路径。即http://localhost:端口/项目名称
注意项目名称之后没有"/"，根据这个相对路径将css和js的路径修正。
使用相对路径的好处：可以一次成功后，直接拷贝到任意地方使用，不受路径约束。
修改后的index.jsp内容如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
String path = request.getContextPath();
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title><%=path %></title>
<script charset="utf-8" src="<%=path %>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=path %>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=path %>/kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="content1"]', {
cssPath : '<%=path %>/kindeditor/plugins/code/prettify.css',
uploadJson : '<%=path %>/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '<%=path %>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>
<%=htmlData%>
<form name="example" method="post" action="index.jsp">
<textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
<br />
<input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
</form>
</body>
</html>
<%!
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>

四、解决本地上传图片，“上传目录不存在”的问题
在WebContent目录下添加一个attached文件夹。
原理：根据index.jsp的配置可以知道，图片文件的上传用到了WebContent/kindeditor/jsp/file_manager_json.jsp
这个文件中的有一个rootPath参数，此参数指定的就是“上传目录”
pageContext.getServletContext().getRealPath("/") + "attached/";
表示查找的是项目根路径下的attached目录