修改jdbc.properties中连接数据库的用户名与密码
将数据库脚本导入到mysql中
demo中 FileLocationConfig.properties 中指定了图片文件上传的后台目录，根据自己的需要进行配置
在程序运行前确保图片的目录是存在的
在tomcat的server.xml中添加配置
<Context debug="0" docBase="F:\filestore" path="/filestore" reloadable="true"> </Context>

配置完成后，本项目是maven项目，导入eclipse运行即可

2 本文讨论主题

1.   KindEditor的概述

2.   KindEditor集成到eclipse项目中 并 代码展示使用

3.   KindEditor实现上传图片并且将图片保存到项目以外的其它文件系统位置

3 KindEditor概述

3.1 KindEditor官网：http://kindeditor.net/demo.php, 进入网页后，到[下载]->[官方下载] 进行下载, 目前最新版本为: KindEditor 4.1.11

3.2 解压 kindeditor-x.x.x.zip 文件, 你可以根据需要取舍自己使用哪种程序(php,jsp,asp), 本文主要讨论jsp程序的使用

1. php - PHP程序

2. jsp - JSP程序

3. asp.net - ASP.NET程序

4. examples - 演示文件

5. lang – 语言包

6. plugins – kindeditor中自定义按钮插件

7. kindeditor-all-min.js kindeditor最主要js文件(压缩)

8. kindeditor-all.js 未压缩

4 KindEditor集成到项目

4.1 项目运行效果图

4.1.1显示所有添加的文章列表(见下图)，点击文章列表后，进入文章详情(4.1.2)

点击”添加文章”进入文章添加页面(4.1.3)

4.1.2 文章详情页面(见下图)

4.1.3 文章添加页面(见下图)

4.2 在eclipse中新建maven项目,项目名称KindEditor,下面列表显示了本项目使用的框架与技术, 下载示例源码查看相关配置与代码

4.2.1 SpringMvc:处理前台发往后台的数据请求

4.2.2 MyBatis: 实现对数据库的ORM操作(存取操作)

4.2.3 MySql: 用于存放数据

4.3 数据库实例名称: t_kindedit, 数据库表：t_article

Id: 主键 Title: 文章标题

Content: 用于存放KindEditor编辑生成的内容(注意:Content的数据类型为longtext)

4.3.1建表语句

CREATE TABLE `t_article` (
  `Id` int(10) NOT NULL   AUTO_INCREMENT COMMENT '文章主键',
  `Title` varchar(100) COLLATE   utf8_unicode_ci NOT NULL COMMENT '文章标题',
  `Content` longtext COLLATE   utf8_unicode_ci COMMENT '文章内容',
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT   CHARSET=utf8 COLLATE=utf8_unicode_ci

4.3.2 Jdbc配置: 请配置数据库用户名与密码

driver=com.mysql.jdbc.Driver
#url=jdbc:mysql://localhost:3306/hctl?characterEncoding=utf-8
url=jdbc\:mysql\://localhost\:3306/t_kindedit?characterEncoding=utf-8&allowMultiQueries=true
#url=jdbc:mysql://www.ad186.com:3306/hctl?characterEncoding=utf-8
username=root
password=root
#username=root
#password=ajqnhwvia
 
#\u5b9a\u4e49\u521d\u59cb\u8fde\u63a5\u6570
initialSize=0
#\u5b9a\u4e49\u6700\u5927\u8fde\u63a5\u6570
maxActive=20
#\u5b9a\u4e49\u6700\u5927\u7a7a\u95f2
maxIdle=20
#\u5b9a\u4e49\u6700\u5c0f\u7a7a\u95f2
minIdle=1
#\u5b9a\u4e49\u6700\u957f\u7b49\u5f85\u65f6\u95f4
maxWait=6000000

4.3 在项目工程中的 src/main/webapp中新建文件夹jsLib(用于存放js库), 将下载的kindeditor放在jsLib下

4.4 添加文章, 在 src/main/webapp中新建文件夹 jsp,此目录存放应用的jsp文件,添加articleAdd.jsp, 在页面中填写文章标题与内容后，点击”提交”后保存文章

4.4.1 articleAdd.jsp运行效果

4.4.2 articleAdd.jsp片段代码讲解

引入kindeditor库文件以及语言包

<script charset="utf-8"   src="<%=contextPath%>/jsLib/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8"   src="<%=contextPath%>/jsLib/kindeditor/lang/zh-CN.js"></script>

初始化kindeditor

KindEditor.ready(function(K) {
       window.editor   = K.create('#editor_id',{
               uploadJson   : '<%=contextPath%>/jsLib/kindeditor/jsp/upload_json.jsp',
               fileManagerJson   : '<%=contextPath%>/jsLib/kindeditor/jsp/file_manager_json.jsp',
               allowFileManager   : true
  });

将Kindeditor渲染到textarea上

<form id="articleForm">
      <div   style="margin-top: 10px;">
               <input   type="text" name="title" placeholder="请输入文章标题" style="width: 300px; height: 30px;">
               </input>
      </div>
      <div   style="margin-top: 10px;">
               <textarea id="editor_id"   name="content" style="width:700px;height:400px;">
               </textarea>
      </div>
</form>

4.4.3 articleAdd.jsp全部代码(可以添加文章也可以修改文章)

<%@ page language="java" contentType="text/html;   charset=UTF-8" pageEncoding="UTF-8"%>
<%String contextPath = request.getContextPath();%>
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>添加文章</title>
       <script charset="utf-8"   src="<%=contextPath%>/jsLib/kindeditor/kindeditor-all.js"></script>
            <script   charset="utf-8" src="<%=contextPath%>/jsLib/kindeditor/lang/zh-CN.js"></script>
            <script   type="text/javascript"   src="<%=contextPath%>/jsLib/jquery/jquery-1.10.1.js"   ></script>
            <script>
                    KindEditor.ready(function(K) {
                              window.editor = K.create('#editor_id',{
                                  uploadJson :   '<%=contextPath%>/jsLib/kindeditor/jsp/upload_json.jsp',
                                  fileManagerJson :   '<%=contextPath%>/jsLib/kindeditor/jsp/file_manager_json.jsp',
                                allowFileManager : true
                        });
                    });
                    
                    $(function(){
                         //异步提交文章标题与内容
                         $('#saveBtn').on('click',   function(){
                                   var   title   = $('input[name=title]').val();
                                   //将kindeditor中的内容同步到textarea中
                                   window.editor.sync();
                                   var   content = $('#editor_id').val().trim(); 
                                   if(title.length   == 0){
                                            alert('请输入标题');
                                            return;
                                   }
                                   if(content.length   == 0){
                                            alert('请输入内容');
                                            return;
                                   }
                                   $.ajax({
                                              url:   '<%=contextPath%>/article/saveArticle.htm',
                                              type: 'post',
                                              data:{
                                                       'title'     : title,
                                                       'content' : content
                                              },
                                              timeout: 1000,
                                              success: function (data, status) {
                                                       if(data.success == true){
                                                                alert(data.msg);
                                                                window.location.href="<%=contextPath%>/article/queryArticle.htm";
                                                       }else if(data.success == false){
                                                                alert(data.msg);
                                                       }
                                                       
                                              },
                                              fail: function (err, status) {
                                                console.log(err)
                                              }
                                  });
                         });
                         
                         });
            </script>
   </head>
   <body style="width:   860px; margin: 0 auto;">
       <div>
          <form   id="articleForm">
                   <div style="margin-top:   10px;">
                            <input   type="text" name="title" placeholder="请输入文章标题" style="width:   300px; height: 30px;"></input>
                   </div>
                   <div style="margin-top:   10px;">
                            <textarea   id="editor_id" name="content"   style="width:700px;height:400px;">
                                        </textarea>
                   </div>
          </form>
          <div>
                   <input   type="button" value="提交" id="saveBtn" />
          </div>
       </div>
   </body>
</html>

4.5 articleList.jsp, 用于查询文章的列表数据

4.5.1文章列表前台(articleList.jsp)

<%@ page language="java"   contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"   prefix="c"%>
<%@ taglib   uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn"   uri="http://java.sun.com/jsp/jstl/functions" %>
<%String contextPath =   request.getContextPath();%>
<!DOCTYPE html>
<html>
         <head>
             <meta charset="UTF-8">
             <title>文章列表</title>
             <link type="text/css"   rel="stylesheet"   href="<%=contextPath%>/css/style.css">
             <script   type="text/javascript"   src="<%=contextPath%>/jsLib/jquery/jquery-1.10.1.js" ></script>
             <script   type="text/javascript">
                //jquery启动入口
                       $(function(){
                          
                       })
                       
                       //跳转到添加文章页面
                          function   addArticle(){
                          window.location.href="<%=contextPath%>/jsp/articleAdd.jsp";
                       }
                       
                       //刷新本页
                       function refresh(){
                          window.location.href="<%=contextPath%>/article/queryArticle.htm";
                       }
                   </script>
         </head>
         <body   style="width: 500px; margin: 0 auto ;">
             <div>
                <a target="_blank"   onclick="addArticle()">添加文章</a>
                <a target="_blank"   onclick="refresh()">刷新列表</a>
             </div>
             
             <div>
                <c:forEach   items="${lstArtiles}" var="item"   varStatus="index">
                         <p><a target="_blank" href="<%=contextPath%>/article/queryArticleById.htm?id=${item.id}">
                             ${index.count}.${item.title}
                             </a>
                         </p>
                </c:forEach>
             </div>
         </body>
</html>

4.6 查看文章详情,articleDetail.jsp

4.6.1 articleDetail.jsp代码, el表达式显示文章内容

<%@ page language=”java”   contentType=”text/html; charset=UTF-8” pageEncoding=”UTF-8”%>
<%@ taglib uri=”http://java.sun.com/jsp/jstl/core” prefix=”c”%>
<%@ taglib uri=”http://java.sun.com/jsp/jstl/fmt” prefix=”fmt”%>
<%@ taglib prefix=”fn” uri=”http://java.sun.com/jsp/jstl/functions”   %>
<%String contextPath = request.getContextPath();%>
<!DOCTYPE html>
<html lang=”en”>
   <head>
       <meta charset=”UTF-8”>
       <title>文章详情</title>
   </head>
   <body style=”width: 860px;   margin: 0 auto ;”>
       <div>
          <div>标题: ${article.title}</div>
          <div>   ${article.content} </div>
       </div>
   </body>
  </html>

4.7 后台java代码,用于处理文章的列表查询,保存与查看文章的详情

package com.main.controller;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
 
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import   org.springframework.web.bind.annotation.RequestMapping;
 
import com.main.model.Article;
import com.main.service.ArticleService;
 
import net.sf.json.JSONObject;
 
@Controller
@RequestMapping("/article")
public class ArticleController {
         
         @Autowired
         private   ArticleService articleService;
         
         public   ArticleController() {
                   System.out.println("Article构造函数");
         }
         
         /**
          * 查询所有文章页面
          * 访问链接:    http://localhost:8080/KindEditor/article/queryArticle.htm
          */
         @RequestMapping("/queryArticle.htm")
    public String   queryArticle(ModelMap map) {
                   Article   article = new Article();
                   List<Article>   lstArticle = articleService.selectByArticle(article);
                   map.put("lstArtiles",   lstArticle);
       return "articleList";
    }
         
         /**
          * 根据文章id查看文章详情页面
          * 访问链接:    http://localhost:8080/KindEditor/article/queryArticleById.htm?id=1
          */
         @RequestMapping("/queryArticleById.htm")
    public String   queryArticleById(ModelMap map, Integer id) {
                   Article   article = articleService.queryArticleById(id);
                   map.put("article",   article);
       return "articleDetail";
    }
         
         
         /**
          * 保存文章内容
          * 访问链接:  http://localhost:8080/KindEditor/article/saveArticle.htm
          */
         @RequestMapping("/saveArticle.htm")
    public String   saveArticle(ModelMap map, String title, String content, HttpServletResponse   response) {
                   Article   article = new Article();
                   article.setTitle(title);
                   article.setContent(content);
                   int   nResult = articleService.saveArticle(article);
                   
                   //保存文章后,告之前台是否成功
                   JSONObject   json = new JSONObject(); 
                   if(nResult   > 0){
                            json.put("success",   true);
                            json.put("msg",   "保存文章成功");
                   }else{
                            json.put("success",   false);
                            json.put("msg",   "保存文章失败");
                   }
                   
               response.setCharacterEncoding("UTF-8");  
               response.setContentType("application/json; charset=utf-8");
                   PrintWriter   out = null;
                   
             try {    
                 out = response.getWriter();  
                 out.print(json.toString());
             } catch (IOException e) {  
                 e.printStackTrace();  
             } finally {  
                 if (out != null) {  
                     out.close();  
                 }    
             }  
             return null;
    }
}

5 KindEditor实现上传图片并且将图片保存到项目以外的其它文件系统位置

5.1实现上传图片功能,由于默认上传图片的目录内嵌在项目工程的目录下,所以项目打包更新时需要考虑到图片文件，所以使用起来很不方便, 5.2会针对这个问题进行解决

5.1.1 在kindeditor中配置上传图片的jsp文件

KindEditor.ready(function(K) {
                   window.editor   = K.create('#editor_id',{
                            uploadJson :   '<%=contextPath%>/jsLib/kindeditor/jsp/upload_json.jsp',
                            fileManagerJson :   '<%=contextPath%>/jsLib/kindeditor/jsp/file_manager_json.jsp',
                            allowFileManager   : true
         });
});

在kindeditor功能按钮上选择本地图片时，upload_json.jsp会被调用,