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。(应该也没有像我这样怀疑人家功能没实现的吧，哈哈)再说一遍，注意路径！！！