这和一篇与上一篇的区别在与，上一篇是直接请求到action我们剩下的都是我们全部手动处理，

而这一片篇是由kindeditor内部处理，图片上传到本地，基本上没什么区别，但是有一点一定要注意的就是，这里面在jsp下有一个lib目录，里面有三个jar文件，一定要将这个三个jar文件考培到tomcat的lib目录下。

　　首先还是先看下目录吧

下面还有修改一下jsp目录下的 file_manager_json.jsp和upload_json.jsp文件 红色圈出的部分，，如下

下面是JSP 代码 ：

<%@ 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+"/";

%>

<!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="${ctx }/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) {

            editor = K.create('textarea[name="content"]', {

                  uploadJson : '${ctx }/res/textEdit/jsp/upload_json.jsp',//上传

                  fileManagerJson : '${ctx }/res/textEdit/jsp/file_manager_json.jsp',//文件管理

                  allowFileManager : true,

                  allowImageUpload : true,

                  autoHeightMode : true,

                  afterCreate : function() {this.loadPlugin('autoheight');},

                  afterBlur : function(){ this.sync(); },  //Kindeditor下获取文本框

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

                  afterUpload: function (url) {

                       var valcontent = $("#txtImgPath").val(); //获取

                     valcontent=valcontent+","+url;

                     K('#txtImgPath').val(valcontent); //将图片放入文本框

                  },

            });

            });

  </script>

  <body>

  <hr/>

           <br/><br/>

           <form name="example" action="${ctx }/post/addPost" 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> 

             <!-- 图片URL -->

             <input type="hidden" id="txtImgPath" name="textImgPath" />

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

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

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

               <p>

                  内容：<textarea name="content" id="content" 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 id="login" 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>

好了 此时已经全部完成了图片上传功能，上传到本地tomcat 项目下对应的文件里

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

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

    一:我用的kindeditor版本是4.1.10 下载完成打开目录结构如下: 二:下面是工程目录也很重要,          三: 好了,准备工作已经做好了,现在就直接上代码了. 首先是页面JSP代码 ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. 富文本编辑器kindeditor配置

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

  9. css渲染（二） 文本

    一.文本样式  首行缩进 text-indent 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格.[注意]该属性可以为负值:应用于: 块级元素(包括block和i ...

随机推荐

  1. HDU 1166 敌兵布阵 【线段树-点修改--计算区间和】

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  2. Linux查看文件编码格式及文件编码转换<转>

    如果你需要在Linux 中操作windows下的文件 ,那么你可能会经常遇到文件 编码 转换的问题.Windows中默认的文件 格式是GBK(gb2312),而Linux 一般都是UTF-8.下面介绍 ...

  3. 什么是OOM？如何解决OOM问题!

    1.什么是OOM? 程序申请内存过大,虚拟机无法满足我们,然后自杀了.这个现象通常出现在大图片的APP开发,或者需要用到很多图片的时候.通俗来讲就是我们的APP需要申请一块内存来存放图片的时候,系统认 ...

  4. 【P2158】仪仗队&欧拉函数详解

    来一道数论题吧. 这个题一眼看上去思路明确,应该是数论,但是推导公式的时候却出了问题,根本看不出来有什么规律.看了马佬题解明白了这么个规律貌似叫做欧拉函数,于是就去百度学习了一下这东西. 欧拉函数的含 ...

  5. 【bzoj1345】[Baltic2007]序列问题Sequence

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1345 因为合并的花费是较大数的权值,所以每个数肯定是和附近的小数合并完后才与大数合并, ...

  6. UVA 11181 Probability|Given (离散概率)

    题意:有n个人去商场,其中每个人都有一个打算买东西的概率P[i].问你最后r个人买了东西的情况下每个人买东西的概率 题解:一脸蒙蔽的题,之前的概率与之后的概率不一样??? 看了白书上的题解才知道了,其 ...

  7. 可编辑的div模仿文本框缓存(使用AUTOCOMPLETE属性,off是不缓存，on是缓存(默认))

    用session实现的, 1.进当前页面就从session(a)中取( sessionStorage.getItem )(不管存在不存在,后续有合理的存储和删除); 2.离开当前页时删除这个sessi ...

  8. Codeforces 895C Square Subsets：状压dp【组合数结论】

    题目链接:http://codeforces.com/problemset/problem/895/C 题意: 给你n个数a[i].(n <= 10^5, 1 <= a[i] <= ...

  9. Redis作为缓存：实战自我总结（转载）

    转载:[http://www.tuicool.com/articles/zayY7v]   redis缓存服务器笔记 redis是一个高性能的key-value存储系统,能够作为缓存框架和队列.但是由 ...

  10. .parent()和.parents()的区别

    parent的取值很明确,就是当前元素的父元素:parents则是当前元素的祖先元素.下面列出例子说明: 如下: <div id='div1'><div id='div2'>& ...