kindeditor在线编辑器使用说明

简单使用方法

1. 下载KindEditor最新版本。

下载地址：http://code.google.com/p/kindeditor/downloads/list

 

2. 解压文件，并把解压后得到的所有文件及文件夹都放到您的程序目录下，例如：http://workspace/example/WebRoot/kindeditor/(提示：最重要的最必须的是kindeditor.js文件和plugins，skins两个文件夹，千万要放进去，至于其它的文件夹，可放可不放，一般是没用的，比如，examples就是20多个效果html。)

 

3.解压文件之后，有个jsp的文件夹，打开后，有个lib的文件夹，里面有三个jar包:commons-fileupload-1.2.1.jar，commons-io-1.4.jar，json_simple-1.1.jar，把这三个jar包放入WEB-INF文件夹下的lib文件夹内，并刷新项目。

 

4. 以上配置好之后，就可以直接在jsp页面上调用了，要保证的是在jsp页面上调kindeditor.js文件时，路径一定要正确，在添加编辑器的页面头部添加以下代码，id为textarea控件的ID。

Js代码

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>    

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

5. 在显示编辑器的位置添加TEXTAREA输入框。

Html代码

1. <textarea id="content_1" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea>  
2. <!-- 注意: 如果原来有TEXTAREA，属性里只加id,width,height即可。 -->  

<textarea id="content_1" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea>
<!-- 注意: 如果原来有TEXTAREA，属性里只加id,width,height即可。 -->

6. 怎么获取textarea的文本内容？

①在TEXTAREA输入框后面添加隐藏input和button，代码如下：

Html代码

1. <input type="hidden" name="content1" id="content1" value="">  
2. <input type="button" class="button_01" value="保 存" onclick="checkSubmit();">  

<input type="hidden" name="content1" id="content1" value="">
<input type="button" class="button_01" value="保 存" οnclick="checkSubmit();">

 ②添加事件处理代码

Js代码

1. <script language="javascript">   
2. function checkSubmit() {     
3.         var content = KE.util.getData("content_1");   
4.         //content = KE.util.escape(content);   
5.         document.NewsInfoForm.content1.value = content;      
6. }    
7. </script>