java 嵌入 编辑器 java实现编辑器

[引言]

我们在制作Java Web项目的时候，经常会需要用户输入并提交内容复杂的信息，比如文字、图片、表格、样式混排的数据信息，这样简单的文本域控件就难以满足我们的需求了，此时我们则需要使用一些“富文本”编辑器了。文本小博老师就为大家介绍一款非常简单易学，却又功能强大的文本编辑器——KindEditor。

[步骤阅读一]文本编辑器原理

其实文本编辑器的原理非常容易理解，它通过Javascript封装了很多现成的功能，将用户控件分为“显示面板”和“代码面板”，用户在显示面板中输入内容，并且可以通过现成的各类按钮实现在文本内嵌入字体样式、编辑表格、表单控件甚至上传图片的功能。而此时代码面板中则通过Javascript，将显示面板中的效果自动转化成了HTML代码，并且对于用户隐藏了起来，当用户编辑完成后，表单真正提交的，则是代码面板中的HTML代码。

[步骤阅读二]文本编辑器使用

第一步：在KindEditor官网下载并解压缩文件夹，并且把解压缩的文件夹复制到项目中。

第二步：引入文件夹中kindeditor/jsp/lib/路径下的jar文件。

第三步：在您需要添加文本编辑器的页面中，导入css和javascript文件，如下：

第四步：在你需要添加文本编辑器的页面中，加入javascript代码，其作用是将文本域控件替换成文本编辑器(其实文本域控件只是隐藏作为代码面板，并且生成与其对应的显示面板)。核心代码如下：

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();
});

第五步：转义控件中的特殊符号，核心代码如下：

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() + "/你要的路径";