kindeditor项目集成

最新推荐文章于 2021-02-20 18:58:18 发布

weixin_34245169

最新推荐文章于 2021-02-20 18:58:18 发布

阅读量265

点赞数

文章标签：开发工具 json 数据库

原文链接：https://my.oschina.net/u/3743971/blog/1791634

版权

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中添加配置

<Context debug="0" docBase="F: ilestore" 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)

kindeditor项目集成

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

kindeditor项目集成

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

kindeditor项目集成

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配置: 请配置数据库用户名与密码

kindeditor项目集成

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

kindeditor项目集成

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

kindeditor项目集成

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

kindeditor项目集成

4.4.1 articleAdd.jsp运行效果

kindeditor项目集成

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上

kindeditor项目集成

<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>

kindeditor项目集成

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

kindeditor项目集成

<%@ 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>

kindeditor项目集成

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

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

kindeditor项目集成

<%@ 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>

kindeditor项目集成

4.6 查看文章详情,articleDetail.jsp

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

kindeditor项目集成

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>

kindeditor项目集成

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

kindeditor项目集成

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; } }

kindeditor项目集成

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

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

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

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项目集成

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

kindeditor项目集成