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

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

        

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<%

request.setCharacterEncoding("UTF-8");

String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'addPost.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

  </head>

  <script type="text/javascript" src="/res/js/jquery-1.9.1.min.js"></script>

  <link rel="stylesheet" href="${ctx }/res/textEdit/themes/default/default.css" />

  <link rel="stylesheet" href="${ctx }/res/textEdit/plugins/code/prettify.css" />

  <script charset="utf-8" src="${ctx }/res/textEdit/kindeditor-min.js"></script>

  <script charset="utf-8" src="${ctx }/res/textEdit/lang/zh_CN.js"></script>

  <script charset="utf-8" src="${ctx }/res/textEdit/plugins/code/prettify.js"></script>

  <script type="text/javascript">

              KindEditor.ready(function(K) {

            var editor1 = K.create('textarea[name="content1"]', {

                cssPath : '${ctx }/res/textEdit/plugins/code/prettify.css',

                uploadJson : '${ctx }/test/test',

                fileManagerJson : '${ctx }/test/test',

                allowFileManager : true,

                  //获取图片上传成功过后返回的图片地址

                  afterUpload: function (url) {

                      K('#txtImgPath').val(url);

                  },

                afterCreate : function() {

                    var self = this;

                    K.ctrl(document, 13, function() {

                        self.sync();

                        document.forms['example'].submit();

                    });

                    K.ctrl(self.edit.doc, 13, function() {

                        self.sync();

                        document.forms['example'].submit();

                    });

                },

            });

            prettyPrint();

        });

  </script>

  <body>

  <hr/>

           <br/><br/>

           <!--显示图片上传成功过后返回的图片地址  -->

           <p>图片地址：<input type="text" id="txtImgPath"  style="width:300px;"/></p>

           <hr/>

           <form name="example" action="${ctx }/notice/addNoticetwo" method="post" enctype="multipart/form-data">

               选择咨询类型：

               <select name="categoryId" id="nl" style="width:155px; height:18px; border:1px solid #ccc; font-size:12px;">

                      <c:forEach items="${categoryList }" var="item">

                          <c:if test="${item.sortOrder==1 }">

                        <option value="${item.id }" selected="selected">${item.name }</option>

                    </c:if>

                    <c:if test="${item.sortOrder!=1 }">

                        <option value="${item.id }" >${item.name }</option>

                    </c:if>

                </c:forEach>

             </select>

            <p> 上传图片或文件:<input type="file" name="fileName"/></p>

               <p>标题：<input type="text" name="title"/></p>

               <p>是否允许评论：<input type="text" name="commentsDisallowed"/></p>

               <p>摘要<input type="text" name="excerpt"/></p>

               <p>

                  内容：<textarea name="content1" id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea>

               </p>

               <p>来源：<input type="text" name="source"/></p>

               <p>是否已发布：  &nbsp;&nbsp;是：<input type="radio" name="published" value="0" />

               &nbsp;&nbsp;  否：<input type="radio" name="published" value="1" /></p>

               <p><input type="submit" value="走着！！"/></p>

           </form>

  </body>

  <%!

    private String htmlspecialchars(String str) {

        str = str.replaceAll("&", "&amp;");

        str = str.replaceAll("<", "&lt;");

        str = str.replaceAll(">", "&gt;");

        str = str.replaceAll("\"", "&quot;");

        return str;

    }

%>

</html>

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

下面是Action后台代码：

　　//注意： @RequestParam("imgFile") MultipartFile idimg 这里面的imgFile 是kindeditor 上传图片的默认名   

    @RequestMapping(value="/test/test",method=RequestMethod.POST)

    public void test(@RequestParam("imgFile") MultipartFile idimg,HttpServletResponse response,HttpServletRequest request) throws IOException{

        //ajax 请求处理中文乱码

        request.setCharacterEncoding("gb2312");

        response.setContentType("text/html;charset=utf-8");

        //获取系统的临时路径  C:\Users\admin\AppData\Local\Temp\

        String temporaryPath= System.getProperty("java.io.tmpdir");

        //获取文件名字  如 :123.JPG

        String fileName=idimg.getOriginalFilename();

        //获取内容

        String content=request.getParameter("content1");

        // 转存文件

        //transferTo()： 次方方为springMVC框架 保存图片的方法

        idimg.transferTo(new File(temporaryPath + fileName));

        //现在既然已经将文件写入到了文件夹， 接下来就是把文件的地址存到数据库了，这个我代码没有写，

        //  temporaryPath + fileName  就是写入文件的全路径

        //  代码省略  。。。。。。

        //返回ajax内容

        PrintWriter pw = response.getWriter();

        String img="http://www.baidu.com/img/bd_logo1.png"; //这是一个图片的地址我随便找了一个写死的 只为测试

        //下面这行代码才是让我发疯的地方，这个地方返回的事一个json串，之前这个串里的参数我不知道写什么，

        //试了好多次好多种都不行，最主要的是不知道是不是这里的错，纠结了好久，最后在一位同行的代码中找到了这

        //行代码，拷贝过来就可以了，让我纠结一天不知道哪里出错的地方原来就是这一行代码。。。。。

        pw.write("{\"error\":0,\"url\":\"" +img+"\"}");       

    }

　 如上这样写的编译器有个致命的弱点，就是返回的图片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. Centos 一次卸载多个RPM包

    rpm 不支持通配符,可以使用 xargs来接收多个变量 示例,一次性卸载所有 erlang先关的rpm包: rpm -qa | grep erlang | xargs rpm -e --nodeps

  2. Eclipse 换主题、皮肤、配色，换黑色主题护眼

    Eclipse写android代码时,默认的文本和框架都是白色,长时间使用,显得过于刺眼.这里介绍三种方法换黑色护眼配色. 1.系统设置里更改 2.从Eclipse Marketplace里下载主题 ...

  3. Linux系统LVM分区减容扩容

    Linux系统LVM分区减容扩容 目标:将VolGroup-lv_home缩小到20G,并将剩余的空间添加给VolGroup-lv_root 1.首先查看磁盘使用情况 [root@localhost ...

  4. HDFS相关概念

    数据块 每个磁盘都有默认的数据块大小,这是磁盘进行数据读写的最小单位.构建与单个磁盘之上的文件系统通过磁盘块来管理该文件系统中的快.该文件系统块的大小可以使磁盘块的整数倍.文件系统块一般为几千字节,而 ...

  5. 运行tomcat，报错：Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误

    运行tomcat时,报错: Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误 原因分析: 这是因为之前已开启了一 ...

  6. EJS基本用法

    1.引入 <script src="/src/ejs_production.js"></script> 2.模板 <script id="c ...

  7. Delphi_添加_mshtml_tlb

    1. Delphi --> Component --> Install ActiveX Contol ... --> 选择“Microsoft HTML Object Library ...

  8. 用外部物理路由器时使用Neutron dhcp-agent提供的metadata服务(by quqi99)

    作者:张华  发表于:2015-12-29版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 环境搭 ...

  9. 将Sql2008的数据库转到2005

    今天碰到一个特别伤心的事情. 事情的起因是这样的,现在我负责评教系统的维护工作.由于中途服务器转迁,迁移之前数据库版本是2005,而现在的服务器版本是2008R2的.在这个过程并没有发生什么问题. 问 ...

  10. GridView1 footer求和

    // ShowFooter="True" private double sum = 0;//取指定列的数据和,你要根据具体情况对待可能你要处理的是int protected voi ...