[引言]
我们在制作Java Web项目的时候，经常会需要用户输入并提交内容复杂的信息，比如文字、图片、表格、样式混排的数据信息，这样简单的文本域控件<textarea></textarea>就难以满足我们的需求了，此时我们则需要使用一些“富文本”编辑器了。文本小博老师就为大家介绍一款非常简单易学，却又功能强大的文本编辑器——KindEditor。
[步骤阅读一]文本编辑器原理
其实文本编辑器的原理非常容易理解，它通过Javascript封装了很多现成的功能，将用户控件分为“显示面板”和“代码面板”，用户在显示面板中输入内容，并且可以通过现成的各类按钮实现在文本内嵌入字体样式、编辑表格、表单控件甚至上传图片的功能。而此时代码面板中则通过Javascript，将显示面板中的效果自动转化成了HTML代码，并且对于用户隐藏了起来，当用户编辑完成后，表单真正提交的，则是代码面板中的HTML代码。
[步骤阅读二]文本编辑器使用
第一步：在KindEditor官网下载并解压缩文件夹，并且把解压缩的文件夹复制到项目中。
第二步：引入文件夹中kindeditor/jsp/lib/路径下的jar文件。
第三步：在您需要添加文本编辑器的页面中，导入css和javascript文件，如下：
<link rel="stylesheet" href="kindeditor-4.1.10/themes/default/default.css" />
<link rel="stylesheet" href="kindeditor-4.1.10/plugins/code/prettify.css" />
<script charset="utf-8" src="kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8" src="kindeditor-4.1.10/plugins/code/prettify.js"></script>
第四步：在你需要添加文本编辑器的页面中，加入javascript代码，其作用是将文本域控件<textarea></textarea>替换成文本编辑器（其实文本域控件只是隐藏作为代码面板，并且生成与其对应的显示面板）。核心代码如下：
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="要替换的textarea的name"]', {
cssPath : 'kindeditor-4.1.10/plugins/code/prettify.css',
uploadJson : 'kindeditor-4.1.10/jsp/upload_json.jsp',
fileManagerJson : 'kindeditor-4.1.10/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['表单的name'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['表单的name'].submit();
});
}
});
prettyPrint();
});
</script>
第五步：转义<textarea></textarea>控件中的特殊符号，核心代码如下：
<%
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>
第六步：如果需要在编辑器中实现上传文件的功能，可以修改上传文件在服务器的保存路径，upload_json.jsp页面中核心代码如下：
//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "你要的路径";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/你要的路径";
来源：oschina
链接：https://my.oschina.net/u/2971691/blog/809063