小博老师解析Java核心技术 ——KindEditor文本编辑器使用

[引言]

咱们在制做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() + "/你要的路径";