Kindeditor在JSP项目中的应用

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在做富文本编辑器的功能，就把Kindeditor如何引入项目简单记录下来。</span>

1.官网下载jsp版本的Kindeditor.

2.按照下载的Readme试试能不能正常使用。

3.将下载的Kindeditor放进项目中，如图所示

4.打开Kindeditor可以看到默认的文件图片以及文件管理是attached，使用默认的地址，记得在项目根目录中新建一个名为attached的文件夹（如上图web下的文件夹attached），用以存放图片文件等。

5.jsp中使用Kindeditor，仿照demo.jsp，引入正确的路径，例如在根目录下使用，路径如下：

	<link rel="stylesheet" href="./js/kindeditor/themes/default/default.css" />
	<link rel="stylesheet" href="./js/kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="./js/kindeditor/kindeditor.js"></script>
	<script charset="utf-8" src="./js/kindeditor/lang/zh_CN.js"></script>
	<script charset="utf-8" src="./js/kindeditor/plugins/code/prettify.js"></script>

6.创建kindeditor实例，

<script>
		KindEditor.ready(function(K) {
			var editor1 = K.create('textarea[name="content1"]', {
				cssPath : './js/kindeditor/plugins/code/prettify.css',
				uploadJson : './js/kindeditor/jsp/upload_json.jsp',
				fileManagerJson : './js/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>

注意uploadJson即是文件及图片上传的处理文件，前期可以用官方自带的进行测试。

7.富文本编辑器的应用：

		<textarea name="content1" cols="100" rows="8" style="width:1000px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>

注意：name值与引入实例kindeditor的name  名字一致（废话，不一致还怎么愉快的玩耍）。

8.我的demo效果图（bling bling的）


 最后：人家官网的例子是可以实现图片的上传的，实现不了的查看引入路径，同时注意不修改file_manager_json.jsp和upload_json.jsp 的筒子们，一定要在项目根目录建立文件夹attached。(应该也没有像我这样怀疑人家功能没实现的吧，哈哈)再说一遍，注意路径！！！