JSP中使用KindEditor解决方案

参考解决方案:

1、http://blog.csdn.net/kalision/article/details/41514467

2、http://blog.163.com/java_zf/blog/static/19926038420133801615408/

KindEditor介绍:

kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor。其产品官方网站为http://kindeditor.net/

KindEditor下载:

官网下载地址:(可能无法下载到历史版本)

http://kindeditor.net/down.php

Google下载地址:

https://code.google.com/p/kindeditor/downloads/list

联系作者索取(不保证有最新版的):

[email protected]

KindEditor使用:

注意:本文使用的实例是用的 kindeditor-4.1.10 版本,

1:解压下载的压缩包到kindeditor目录下;

2:将kindeditor文件夹复制到项目中,如"/webroot/"下;可以把php,asp,asp.net三个目录删掉。导入后的目录结构如下所示:

JSP中使用KindEditor解决方案_第1张图片

3:将kindeditor/jsp/lib/下的所有jar包引入到工程中。(此版本为3个jar包,最好是使用拷贝到WEB-INF/lib下引用);

JSP中使用KindEditor解决方案_第2张图片

4:在需要用到文本编辑器的JSP页面的head部分引用js文件:

  1. <script>  
  2.         KindEditor.ready(function(K) {  
  3.               K.create('#editor_id', {  
  4.                 uploadJson : '${context}/kindeditor/jsp/upload_json.jsp',  
  5.                 fileManagerJson : '${context}/kindeditor/jsp/file_manager_json.jsp',  
  6.                 allowFileManager : true  
  7.               });  
  8.         });  
  9. script> 
注:${context}为上下文路径。

5:在body中添加

<textarea id="editor_id" name="content" style="width:96%;height:350px;visibility:hidden;">${WenZhang.content}textarea> 

注:textarea的id属性值必须和head标签内定义的K.create()中的保持一致。name属性即为后台接受参数名称的值。

${WenZhang.content}是要编辑的内容。

6:最后记住,在提交的时候需要加入下面这段代码
   this.editor.sync();
否则提交的数据无法保存,且还是显示原来的数据。

你可能感兴趣的:(web开发)