kindeditor項目集成

最新 04-09

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

實例下載：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=69

KindEditor使用範例

1概述

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

Demo中使用的工具可以在百度雲下載:

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

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

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

MySql伺服器: http://pan.baidu.com/s/1b7ThBg

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

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

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

修改jdbc.properties中連接資料庫的用戶名與密碼

將資料庫腳本導入到mysql中

demo中 FileLocationConfig.properties 中指定了圖片文件上傳的後台目錄，根據自己的需要進行配置

在程序運行前確保圖片的目錄是存在的

在tomcat的server.xml中添加配置

配置完成後，本項目是maven項目，導入eclipse運行即可

2本文討論主題

1. KindEditor的概述2. KindEditor集成到eclipse項目中並代碼展示使用3. KindEditor實現上傳圖片並且將圖片保存到項目以外的其它文件系統位置

3KindEditor概述

3.1 KindEditor官網：http://kindeditor.net/demo.php, 進入網頁後，到[下載]->[官方下載] 進行下載, 目前最新版本為:KindEditor 4.1.11

3.2 解壓 kindeditor-x.x.x.zip 文件, 你可以根據需要取捨自己使用哪種程序(php,jsp,asp), 本文主要討論jsp程序的使用

4 KindEditor集成到項目

4.1 項目運行效果圖

4.1.2 文章詳情頁面(見下圖)

4.1.3 文章添加頁面(見下圖)

4.2 在eclipse中新建maven項目,項目名稱KindEditor,下面列表顯示了本項目使用的框架與技術, 下載示例源碼查看相關配置與代碼

4.3 資料庫實例名稱: t_kindedit, 資料庫表：t_article

Id: 主鍵 Title: 文章標題

Content: 用於存放KindEditor編輯生成的內容(注意:Content的數據類型為longtext)

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 #u5b9au4e49u521du59cbu8fdeu63a5u6570 initialSize=0 #u5b9au4e49u6700u5927u8fdeu63a5u6570 maxActive=20 #u5b9au4e49u6700u5927u7a7au95f2 maxIdle=20 #u5b9au4e49u6700u5c0fu7a7au95f2 minIdle=1 #u5b9au4e49u6700u957fu7b49u5f85u65f6u95f4 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庫文件以及語言包

初始化kindeditor

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

將Kindeditor渲染到textarea上

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

添加文章

4.5 articleList.jsp, 用於查詢文章的列表數

文章列表

/css/style.css">

添加文章刷新列表

$.$

4.6 查看文章詳情,articleDetail.jsp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 文章詳情

標題: $

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 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會針對這個問題進行解決

在kindeditor功能按鈕上選擇本地圖片時，upload_json.jsp會被調用,