一：我用的kindeditor版本是4.1.10 下载完成打开目录结构如下：

二：下面是工程目录也很重要，

        

三： 好了，准备工作已经做好了，现在就直接上代码了。 首先是页面JSP代码比较简单，，基本上就是从下载下来的插件里面有demo页面拷贝的代码稍加改动一下就好了。

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>
  7. <%
  8. request.setCharacterEncoding("UTF-8");
  9. String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
  10. %>
  11. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  12. <html>
  13.   <head>
  14.     <base href="<%=basePath%>">
  15.     <title>My JSP 'addPost.jsp' starting page</title>
  16.     <meta http-equiv="pragma" content="no-cache">
  17.     <meta http-equiv="cache-control" content="no-cache">
  18.     <meta http-equiv="expires" content="0">
  19.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  20.     <meta http-equiv="description" content="This is my page">
  21.     <!--
  22.     <link rel="stylesheet" type="text/css" href="styles.css">
  23.     -->
  24.   </head>
  25.   <script type="text/javascript" src="/res/js/jquery-1.9.1.min.js"></script>
  26.   <link rel="stylesheet" href="${ctx }/res/textEdit/themes/default/default.css" />
  27.   <link rel="stylesheet" href="${ctx }/res/textEdit/plugins/code/prettify.css" />
  28.   <script charset="utf-8" src="${ctx }/res/textEdit/kindeditor-min.js"></script>
  29.   <script charset="utf-8" src="${ctx }/res/textEdit/lang/zh_CN.js"></script>
  30.   <script charset="utf-8" src="${ctx }/res/textEdit/plugins/code/prettify.js"></script>
  31.   <script type="text/javascript">
  32.               KindEditor.ready(function(K) {
  33.             var editor1 = K.create('textarea[name="content1"]', {
  34.                 cssPath : '${ctx }/res/textEdit/plugins/code/prettify.css',
  35.                 uploadJson : '${ctx }/test/test',
  36.                 fileManagerJson : '${ctx }/test/test',
  37.                 allowFileManager : true,
  38.  
  39.                   //获取图片上传成功过后返回的图片地址
  40.                   afterUpload: function (url) {
  41.                       K('#txtImgPath').val(url);
  42.                   },
  43.  
  44.                 afterCreate : function() {
  45.                     var self = this;
  46.                     K.ctrl(document, 13, function() {
  47.                         self.sync();
  48.                         document.forms['example'].submit();
  49.                     });
  50.                     K.ctrl(self.edit.doc, 13, function() {
  51.                         self.sync();
  52.                         document.forms['example'].submit();
  53.                     });
  54.                 },
  55.  
  56.             });
  57.             prettyPrint();
  58.         });
  59.   </script>
  60.  
  61.   <body>
  62.  
  63.   <hr/>
  64.            <br/><br/>
  65.            <!--显示图片上传成功过后返回的图片地址  -->
  66.            <p>图片地址：<input type="text" id="txtImgPath"  style="width:300px;"/></p>
  67.            <hr/>
  68.  
  69.            <form name="example" action="${ctx }/notice/addNoticetwo" method="post" enctype="multipart/form-data">
  70.                选择咨询类型：
  71.                <select name="categoryId" id="nl" style="width:155px; height:18px; border:1px solid #ccc; font-size:12px;">
  72.                       <c:forEach items="${categoryList }" var="item">
  73.                           <c:if test="${item.sortOrder==1 }">
  74.                         <option value="${item.id }" selected="selected">${item.name }</option>
  75.                     </c:if>
  76.                     <c:if test="${item.sortOrder!=1 }">
  77.                         <option value="${item.id }" >${item.name }</option>
  78.                     </c:if>
  79.                 </c:forEach>
  80.              </select>
  81.             <p> 上传图片或文件:<input type="file" name="fileName"/></p>
  82.                <p>标题：<input type="text" name="title"/></p>
  83.                <p>是否允许评论：<input type="text" name="commentsDisallowed"/></p>
  84.                <p>摘要<input type="text" name="excerpt"/></p>
  85.                <p>
  86.                   内容：<textarea name="content1" id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea>
  87.                </p>
  88.                <p>来源：<input type="text" name="source"/></p>
  89.                <p>是否已发布：  &nbsp;&nbsp;是：<input type="radio" name="published" value="0" />
  90.                &nbsp;&nbsp;  否：<input type="radio" name="published" value="1" /></p>
  91.                <p><input type="submit" value="走着！！"/></p>
  92.            </form>
  93.   </body>
  94.   <%!
  95.     private String htmlspecialchars(String str) {
  96.         str = str.replaceAll("&", "&amp;");
  97.         str = str.replaceAll("<", "&lt;");
  98.         str = str.replaceAll(">", "&gt;");
  99.         str = str.replaceAll("\"", "&quot;");
  100.         return str;
  101.     }
  102. %>
  103. </html>

下面是此文本编译器的页面展示：

下面是Action后台代码：

  1. 　　//注意： @RequestParam("imgFile") MultipartFile idimg 这里面的imgFile 是kindeditor 上传图片的默认名   
  2.  
  3.     @RequestMapping(value="/test/test",method=RequestMethod.POST)
  4.     public void test(@RequestParam("imgFile") MultipartFile idimg,HttpServletResponse response,HttpServletRequest request) throws IOException{
  5.         //ajax 请求处理中文乱码
  6.         request.setCharacterEncoding("gb2312");
  7.         response.setContentType("text/html;charset=utf-8");
  8.  
  9.         //获取系统的临时路径  C:\Users\admin\AppData\Local\Temp\
  10.         String temporaryPath= System.getProperty("java.io.tmpdir");
  11.         //获取文件名字  如 :123.JPG
  12.         String fileName=idimg.getOriginalFilename();
  13.         //获取内容
  14.         String content=request.getParameter("content1");
  15.  
  16.         // 转存文件
  17.         //transferTo()： 次方方为springMVC框架 保存图片的方法
  18.         idimg.transferTo(new File(temporaryPath + fileName));
  19.  
  20.         //现在既然已经将文件写入到了文件夹， 接下来就是把文件的地址存到数据库了，这个我代码没有写，
  21.         //  temporaryPath + fileName  就是写入文件的全路径
  22.         //  代码省略  。。。。。。
  23.  
  24.         //返回ajax内容
  25.         PrintWriter pw = response.getWriter();
  26.         String img="http://www.baidu.com/img/bd_logo1.png"; //这是一个图片的地址我随便找了一个写死的 只为测试
  27.  
  28.         //下面这行代码才是让我发疯的地方，这个地方返回的事一个json串，之前这个串里的参数我不知道写什么，
  29.         //试了好多次好多种都不行，最主要的是不知道是不是这里的错，纠结了好久，最后在一位同行的代码中找到了这
  30.         //行代码，拷贝过来就可以了，让我纠结一天不知道哪里出错的地方原来就是这一行代码。。。。。
  31.         pw.write("{\"error\":0,\"url\":\"" +img+"\"}");       
  32.  
  33.     }

　 如上这样写的编译器有个致命的弱点，就是返回的图片URL 必须是网络上服务器上的到页面才可以展示， 要是拿的本地图片是展示不出来的，　
    还有上传多张图片，百度地图等功能还没有写，，哎，，希望得到哪位大神指点吧！

一：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现的更多相关文章

  1. 二：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现

    这和一篇与上一篇的区别在与,上一篇是直接请求到action我们剩下的都是我们全部手动处理, 而这一片篇是由kindeditor内部处理,图片上传到本地,基本上没什么区别,但是有一点一定要注意的就是,这 ...

  2. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  3. 后台文本编辑器KindEditor介绍

    后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...

  4. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  5. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  6. KindEditor 4.1.10 (2013-11-23)首行空格不能显示在编辑器内

    KindEditor版本: KindEditor 4.1.10 (2013-11-23) 一.BUG再现步骤: 1.文章前面插入二个全角空格作为缩进,因为并非所有段落都有缩进故不采用 CSS 的 te ...

  7. python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  8. 简易Java文本编译器（C++）

    如何使用VS写一个Java的文本"编译器 "? 所需程序: 1.Visual Studio 2.JDK 你是否因为习惯于使用VS编译C/C++程序,在学java的时候改用新编译器而 ...

  9. Linux下vim（文本编译器）的使用

    vim (文本编译器): Vim是从 vi 发展出来的一个文本编辑器. vim的一些命令操作: 插入命令: a 在光标所在字符后插入 A 在光标所在行尾插入 i 在光标所在字符前插入 I 在光标所在行 ...

随机推荐

  1. 原生javasxript获取浏览器的滚动距离和可视窗口的高度

    原生javasxript获取浏览器的滚动距离和可视窗口的高度 //封装兼容性方法获取滚动的距离 function getScrollOffset(){ if(window.pageXOffset){ ...

  2. 20165101刘天野 2017-2018-2 《Java程序设计》第7周学习总结

    #20165101刘天野 2017-2018-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十一章JDBC与MySQL数据库 JDBC简介 JDBC(Java Databas ...

  3. vs 2010 mvc 3.0安装软件

    下载链接如下:MVC 3安装包:http://www.microsoft.com/downloads/zh-cn/details.aspx?familyid=d2928bc1-f48c-4e95-a0 ...

  4. JavaWeb -- sevlet 监听器

    1.三个域对象的监听(创建和销毁) servletContext,  session, request 监听器 ServletContext监听器: public class MyServletCon ...

  5. js简单工厂

    我以计算器为例写一个简单工厂模式,只完成加减乘除4个计算功能,考虑到其他功能方便日后扩展,遵循开放-封闭原则. 简单工厂类图: 先看一下C#的简单工厂是如何实现的: 定义抽象类Operation,加减 ...

  6. SSIS之数据流任务

    数据流任务主要用于运行数据流以提取.转换.加载源数据.一个包中可以有多个数据流任务,也可以包含零个数据流任务.下面关系图显示含有一个数据流任务的包: 了解数据流任务后,我们就简要的学习一下如何创建数据 ...

  7. python3中的unicode_escape

    一. 响应的两种方式 在使用python3的requests模块时,发现获取响应有两种方式 其一,为文本响应内容, r.text 其二,为二进制响应内容,r.content 在<Python学习 ...

  8. json与NSString转换

    json to string NSData *jsonData = [NSJSONSerialization dataWithJSONObject:json options:NSJSONWriting ...

  9. 用createinstallmedia创建可恢复的OSX安装DMG

    准备 从App Store下载OS X安装程序,下载完成,会在应用程序目录 /Applications 下找到类似 Install OS X 10.xxxxxx.app(中文名如:安装 OS X 10 ...

  10. mybatis报Error updating database. Cause: java.lang.IllegalArgumentException: invalid comparison: java.util.Date and java.lang.String

    mybatis 3.3.0中对于时间参数进行比较时的一个bug. 如果拿传入的时间类型参数与空字符串''进行对比判断则会引发异常. 所以在上面的代码中去该该判断, 只保留非空判断就正常了 <if ...