kindeditor項目集成

時間 2019-12-10

標籤 kindeditor 項目集成简体版

原文原文鏈接

本文介紹了kindeditor編輯器與java web進行集成，實現文章內容的上傳，查詢與修改，因爲kindeditor圖片默認上傳到項目中，一旦項目須要升級，須要將圖片文件拷貝出來，在新項目部署完成以後，再將kindeditor的圖片放到項目中，而本文在這一點上進行了改進，實現了上傳圖片與項目路徑分開，極大便捷了web版本升級javascript

實例下載php

KindEditor使用範例css

1 概述

常常上論壇的網友會發現，網頁上的內容是由後臺相似word的在線編輯工具編輯而成,這樣的工具小編在網上搜索了一下,大體有UEditor, KindEditor, eWebEditor等, 今天咱們就來體驗一下KindEditor的使用, 最後你能夠下載精心爲您準備的Demo [下載]html

Demo中使用的工具能夠在百度雲下載: java

Eclipse: https://pan.baidu.com/s/1ci4Nimmysql

Tomcat: https://pan.baidu.com/s/1eS6JlrOjquery

Maven: https://pan.baidu.com/s/1i4Ud35Fgit

MySql服務器: http://pan.baidu.com/s/1b7ThBggithub

MySql客戶端(sqlyog): http://pan.baidu.com/s/1hs5Vmbqweb

JDK1.7: http://pan.baidu.com/s/1pLBMCHH

下載demo後須要進行的配置：

修改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會被調用,

在kindeditor功能按鈕上選擇網絡圖片時，file_manager_json.jsp會被調用

5.2 配置上傳圖片的目錄

5.2.1 在upload_json.jsp中修改圖片存放目錄，將下圖原代碼註釋換成自定義目錄

savePath(圖片絕對路徑): f:/filestore/attached/圖片位置+圖片名稱

saveUrl(圖片工程路徑): /filestore/attached/圖片位置+圖片名稱

5.2.2 file_manager_json.jsp查看上傳過圖片的路徑

rootPath:/filestore/attached/+圖片位置+圖片名稱

rootUrl:/filestore/attached/+圖片位置+圖片名稱

5.3 在tomcat的server.xml的Host中配置以下映射路徑

注意: 在程序啓動以前, 「F:/filestore」這個目錄必須存在,不然程序啓動報錯

必須是下面的順序