當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

kindeditor项目集成

發布時間：2025/3/15 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了 kindeditor项目集成小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

本文介紹了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實現上傳圖片并且將圖片保存到項目以外的其它文件系統位置

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庫文件以及語言包

初始化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上

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" οnclick="addArticle()">添加文章</a> <a target="_blank" οnclick="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表達式顯示文章內容

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <%@ 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功能按鈕上選擇本地圖片時，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”這個目錄必須存在,否則程序啟動報錯

必須是下面的順序

5.4 試驗: 從本地選擇一張圖片,圖片路徑為下圖所示(將源代碼按鈕選上)

地址欄訪問路徑: http://localhost:8080/filestore/attached/image/20170901/20170901203502_970.jpg

轉載于:https://my.oschina.net/u/3743971/blog/1791634

總結

以上是生活随笔為你收集整理的kindeditor项目集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：数据绑定（二）把控件作为Binding源
下一篇： Kubernetes基础：Pod的详细介