kindeditor文本编辑器配置和使用方法

最新推荐文章于 2025-09-24 12:37:58 发布

原创最新推荐文章于 2025-09-24 12:37:58 发布 · 1.8w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #插件 #文本编辑

java web 专栏收录该内容

24 篇文章

订阅专栏

在做类似新闻网站的web时候，我们需要对文章进行编辑，这个时候就会用到文本编辑器插件，在众多文本编辑器插件中比较推荐kindeditor插件。下面具体说说这种插件的用法。

1.官网下载

地址： http://kindeditor.net/down.php，下载最新的即可。

2.选择合适的内容到项目中

解压以后有很多文件，服务器版本有ASP、ASP.NET、JSP、PHP几种，这里面我们选择jsp作为服务器。把压缩包中的如下文件放到kindeditor文件夹中，然后放到项目工程中去：

3.选择使用的服务器

如图：

打开image.js，将其中的如下代码

改成需要的服务器处理文件，这里面改成upload_json.jsp。

4.在jsp中进行配置

(1)引入如下文件：

   
    
     <link rel="stylesheet" href="<%=path%>/kindeditor/themes/default/default.css" />
    
    
     	<link rel="stylesheet" href="<%=path%>/kindeditor/plugins/code/prettify.css" />
    
    
     	<script charset="utf-8" src="<%=path%>/kindeditor/kindeditor.js"></script>
    
    
     	<script charset="utf-8" src="<%=path%>/kindeditor/lang/zh_CN.js"></script>
    
    
     	<script charset="utf-8" src="<%=path%>/kindeditor/plugins/code/prettify.js"></script>

(2)定义jsp中相应标签，我们通常用textarea来存放文本编辑器中的值，如下：

   
    
                                  <tr>
    
    
     								<td align="center">
    
    
     								    <textarea name="content" id="content" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;" ><%=htmlspecialchars(htmlData)%></textarea>
    
    
     		                            <br />
    
    
     		                        </td>
    
    
     							</tr>

(3)JS脚本中对其进行文本编辑器初始化:

   
    
     <script>
    
    
     	    var editor1;
    
    
     		KindEditor.ready(function(K) {
    
    
     			    editor1 = K.create('textarea[name="content"]', {
    
    
     				cssPath : '<%=path%>/kindeditor/plugins/code/prettify.css',
    
    
     				uploadJson : '<%=path%>/kindeditor/jsp/upload_json.jsp',//标识处理图片的文件
    
    
     				fileManagerJson : '<%=path%>/kindeditor/jsp/file_manager_json.jsp',
    
    
     				allowFileManager : true,//允许上传文件和图片
    
    
     			    afterCreate : function() { 
    
    
     		            this.sync(); 
    
    
     		        }, 
    
    
     		        afterBlur:function(){ 
    
    
     		            this.sync(); 
    
    
     		        }                 
    
    
     			});
    
    
     			prettyPrint();
    
    
     		});
    
    
     </script>

5.修改处理上传图片的代码

upload_json.jsp是处理图片的代码，打开这个图片，修改图片保存路径的代码，如下：

   
    
     //这里面我们将图片保存在attached文件中，需要处理好该文件夹所在的路径
    
    
     String savePath = pageContext.getServletContext().getRealPath("/") + "/kindeditor/attached/";
    
    
     //文件保存目录URL
    
    
     String saveUrl  = path+"/kindeditor/attached/";

7.为tomcat添加lib

如下图，将jsp的lib文件夹下的3个包放到tomcat的lib文件夹中

这样子当打开jsp的时候就能正常显示出本文编辑器了并且能正常处理图片上传了。

8.将文本编辑器的内容保存到数据库中去:

   
    
     $.ajax(
    
    
     					{
    
    
     						url: "dojkcytj.do?loginID="+window.parent.$("#loginID").val(),
    
    
     						data: {'content':editor1.html(),'type':$("#type").val(),'title':$("#title").val()},
    
    
     						type: "post",
    
    
     						cache : false,
    
    
     						success:function(responseText){
    
    
     							if(responseText == "0"){
    
    
     		  						alert("添加成功");
    
    
     		  						window.parent.$("#changePasswdDialog").dialog("close");	
    
    
     		  			            $("#btnSave").disabled = true;
    
    
     		  			            $("#btnSave").hide();
    
    
     		  						return;
    
    
     		  					}
    
    
     		  					if(responseText == "1"){
    
    
     		  						alert("添加失败");
    
    
     		  						window.parent.$("#changePasswdDialog").dialog("close");	
    
    
     		  			            $("#btnSave").disabled = true;
    
    
     		  			            $("#btnSave").hide();
    
    
     		  						return;
    
    
     		  					}
    
    
     		  				},
    
    
     		  				error:function(){
    
    
     		  					alert("system error");
    
    
     		  				}
    
    
     					}
    
    
     				);
    
    
     		 }

调用ajax方法，通过editor1.html()获取文本编辑器内容，并把它复制给content，这样后台只需要把content的内容存到数据库中即可。由于文本编辑器内容可能较多，因此数据库中用longtext类型来接收内容。这样子。编辑器的内容就以html格式保存早数据中去了。

9.将数据库中存储的内容回显到文本编辑器中

(1)将数据库中的内容取出来放到Model实体类中，将实体类添加到JSP中。

(2)修改jsp中相应textarea内容，即可完成内容回显，如下：

   
    
                                 <tr>
    
    
     								<td align="center">
    
    
     								    <textarea name="content" id="content"  cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;" >${HZGS.content}</textarea>
    
    
     		                            <br />
    
    
     		                        </td>
    
    
     							</tr>