码迷,mamicode.com
首页 > 系统相关 > 详细

KindEditor在eclipse里的配置方法

时间:2018-04-22 10:49:13      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:压缩包   get   引入   代码   历史版本   定义   删掉   ali   highlight   

KindEditor介绍:

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

KindEditor下载:

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

http://kindeditor.net/down.php

Google下载地址:

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

KindEditor使用:

注意:本文使用的实例是用的 kindeditor-4.1.10 版本(下载地址:http://down.admin5.com/qita/8893.html),

   本文以 文章添加修改查看 的业务流程来实现演示整个应用过程。

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

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

技术分享图片

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

4:在需要用到文本编辑器的JSP页面的head部分引用js文件(add.jsp edit.jsp)

示例代码如下:

 

[html] view plain copy
 
  1. <script type="text/javascript" charset="utf-8" src="${context}/kindeditor/kindeditor.js"></script>      
  2. <script charset="utf-8" src="<span style="font-family: Arial, Helvetica, sans-serif;">${context}</span><span style="font-family: Arial, Helvetica, sans-serif;">/</span><span style="font-family: Arial, Helvetica, sans-serif;">kindeditor/lang/zh_CN.js"></script></span>  
  3. <script>  
  4.         KindEditor.ready(function(K) {  
  5.               K.create(‘#editor_id‘, {  
  6.                 uploadJson : ‘${context}/kindeditor/jsp/upload_json.jsp‘,  
  7.                 fileManagerJson : ‘${context}/kindeditor/jsp/file_manager_json.jsp‘,  
  8.                 allowFileManager : true  
  9.               });  
  10.         });  
  11. </script>  

注:${context}为上下文路径。

5:add.jsp 在要插入文本编辑器的部分插入如下代码:

 

[html] view plain copy
 
  1. <textarea id="editor_id" name="content" style="width:96%;height:350px;visibility:hidden;"></textarea>  

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

6:editor.jsp 在要插入文本编辑器的部分插入如下代码:

 

[html] view plain copy
 
  1. <textarea id="editor_id" name="content" style="width:96%;height:350px;visibility:hidden;">${WenZhang.content}</textarea>  


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

7:show.jsp 展示页面直接展示数据库存放内容即可。

KindEditor在eclipse里的配置方法

标签:压缩包   get   引入   代码   历史版本   定义   删掉   ali   highlight   

原文地址:https://www.cnblogs.com/pegasus827/p/8905593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!