kindeditor在JSP中的使用

最新推荐文章于 2019-06-21 20:00:00 发布

转载最新推荐文章于 2019-06-21 20:00:00 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lionden/archive/2012/04/13/kindeditor.html

文章标签：

#javascript #开发工具 #ViewUI

本文介绍如何在JSP项目中集成KindEditor富文本编辑器。通过简单几步，即可实现在网页上进行文档编辑的功能。KindEditor支持多种语言环境，特别适合需要在线编辑内容的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　这些天，一直在给一个老师做一个专业课程的“精品课程网站”，一是为了练练手，在学JSP嘛，二是，歪门邪道的提高下期末成绩。^_^

　　废话少说，话说网站的后台管理中需要做一个在线编辑前台新闻等内容的页面，当然是要用文档在线编辑了。在网上海搜了一下，发现谷歌共享上有这么一个神器——kindeditor，下载地址：http://code.google.com/p/kindeditor/downloads/list；小弟下载的是：kindeditor-3.5.6-zh_CN.zip。怕其他的不带中国标记的不能支持汉字嘛。

　　使用步骤：

　　① 将压缩包解压到kindeditor里，注意包括所有文件夹，尤其是skips、jsp、kindeditor.js等；

　　② 将kindeditor文件夹复制到项目中，如"/webroot/program/"下；

　　↑ 将"jsp/lib"下的三个“*.jar”文件复制到工程下的“WEB-INF/lib”下，并刷新MyEclipse里的项目；

　　④ 在需要用到文本编辑器的JSP页面的head部分应用javascript，示例代码如下：

1 <script type="text/javascript" charset="utf-8" src="../kindeditor/kindeditor.js"></script><!-- 添加kindeditor的引用 -->     
2     <script type="text/javascript">     
3     KE.show({     
4     id : 'content_1'//TEXTAREA输入框的ID     
5     });     
6     </script>

⑤ 在要插入文本编辑器的部分插入如下代码，其实就是一TextArea，只不过是有样式了而已：

1 <textarea id="content_1" name="content" style="width:605px;height:300px;visibility:hidden;"></textarea>
2     <!-- 注意: 即在原有的TEXTAREA中，插入id,width,height属性。 -->