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

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

　　首先还是先看下目录吧

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

下面是JSP 代码 ：

  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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>My JSP 'addPost.jsp' starting page</title>
  12.     <meta http-equiv="pragma" content="no-cache">
  13.     <meta http-equiv="cache-control" content="no-cache">
  14.     <meta http-equiv="expires" content="0">
  15.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  16.     <meta http-equiv="description" content="This is my page">
  17.     <!--
  18.     <link rel="stylesheet" type="text/css" href="styles.css">
  19.     -->
  20.   </head>
  21.   <script type="text/javascript" src="${ctx }/res/js/jquery-1.9.1.min.js"></script>
  22.   <link rel="stylesheet" href="${ctx }/res/textEdit/themes/default/default.css" />
  23.   <link rel="stylesheet" href="${ctx }/res/textEdit/plugins/code/prettify.css" />
  24.   <script charset="utf-8" src="${ctx }/res/textEdit/kindeditor-min.js"></script>
  25.   <script charset="utf-8" src="${ctx }/res/textEdit/lang/zh_CN.js"></script>
  26.   <script charset="utf-8" src="${ctx }/res/textEdit/plugins/code/prettify.js"></script>
  27.   <script type="text/javascript">
  28.         KindEditor.ready(function(K) {
  29.             editor = K.create('textarea[name="content"]', {
  30.                   uploadJson : '${ctx }/res/textEdit/jsp/upload_json.jsp',//上传
  31.                   fileManagerJson : '${ctx }/res/textEdit/jsp/file_manager_json.jsp',//文件管理
  32.                   allowFileManager : true,
  33.                   allowImageUpload : true,
  34.                   autoHeightMode : true,
  35.                   afterCreate : function() {this.loadPlugin('autoheight');},
  36.                   afterBlur : function(){ this.sync(); },  //Kindeditor下获取文本框
  37.                   //获取图片上传成功过后返回的图片地址
  38.                   afterUpload: function (url) {
  39.                        var valcontent = $("#txtImgPath").val(); //获取
  40.                      valcontent=valcontent+","+url;
  41.                      K('#txtImgPath').val(valcontent); //将图片放入文本框
  42.                   },
  43.             });
  44.             });
  45.   </script>
  46.  
  47.   <body>
  48.   <hr/>
  49.            <br/><br/>
  50.            <form name="example" action="${ctx }/post/addPost" method="post" enctype="multipart/form-data">
  51.                选择咨询类型：
  52.                <select name="categoryId" id="nl" style="width:155px; height:18px; border:1px solid #ccc; font-size:12px;">
  53.                       <c:forEach items="${categoryList }" var="item">
  54.                           <c:if test="${item.sortOrder==1 }">
  55.                         <option value="${item.id }" selected="selected">${item.name }</option>
  56.                     </c:if>
  57.                     <c:if test="${item.sortOrder!=1 }">
  58.                         <option value="${item.id }" >${item.name }</option>
  59.                     </c:if>
  60.                 </c:forEach>
  61.              </select>
  62.              <p> 封面图片:<input type="file" name="fileName" /></p> 
  63.  
  64.              <!-- 图片URL -->
  65.              <input type="hidden" id="txtImgPath" name="textImgPath" />
  66.                <p>标题：<input type="text" name="title"/></p>
  67.                <p>是否允许评论：<input type="text" name="commentsDisallowed"/></p>
  68.                <p>摘要<input type="text" name="excerpt"/></p>
  69.                <p>
  70.                   内容：<textarea name="content" id="content" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea>
  71.                </p>
  72.                <p>来源：<input type="text" name="source"/></p>
  73.                <p>是否已发布：  &nbsp;&nbsp;是：<input type="radio" name="published" value="0" />
  74.                &nbsp;&nbsp;  否：<input type="radio" name="published" value="1" /></p>
  75.                <p><input id="login" type="submit" value="走着！！"/></p>
  76.            </form>
  77.   </body>
  78. <%!
  79.     private String htmlspecialchars(String str) {
  80.         str = str.replaceAll("&", "&amp;");
  81.         str = str.replaceAll("<", "&lt;");
  82.         str = str.replaceAll(">", "&gt;");
  83.         str = str.replaceAll("\"", "&quot;");
  84.         return str;
  85.     }
  86. %>
  87. </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. 正则表达式 获取字符串内提取图片URL字符串

    #region 获取字符串内提取图片URL字符串 /// <summary> /// 获取字符串内提取图片URL字符串 /// </summary> /// <param ...

  2. start、run、join

    首先得了解什么是主线程,当Java程序启动时,一个线程立刻运行,该线程通常叫做程序的主线程(main thread).主线程的重要性体现在两方面:1. 它是产生其他子线程的线程:2. 通常它必须最后完 ...

  3. 安装Discuz开源论坛

    11.添加mysql普通用户 接着上篇的lamp这篇安装Discuz 配置虚拟主机 1.打开虚拟主机配置 [root@NFS-31 ~]# vim /usr/local/apache2/conf/ht ...

  4. 20145240 《Java程序设计》第二次实验报告

    20145240 <Java程序设计>第二次实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1452 指导教师:娄嘉鹏 实验日期:2016.04.12 实验 ...

  5. JSP JavaBeans

    Javabean的设计原则 公有类 无参公有构造方法 私有属性 getter和setter方法 在Jsp页面中如何使用Javabeans? 像使用普通Java类一样,创建JavaBeans实例. 在J ...

  6. 聚合 key-value 转为 key-valueList

    一个文件A.tmp的内容如下: 10.9.20.1 m1 10.9.20.2 m1 10.9.20.3 m1 10.9.20.1 m2 10.9.20.2 m2 10.9.20.3 m2 想输出格式为 ...

  7. docker官方镜像库 搭建 jekins

    先去docker hub 镜像官网下载jenkins 镜像(https://hub.docker.com/_/jenkins/): 其实就是在docker 中执行命令:docker pull jenk ...

  8. centos下安装python2.7.9和pip以及数据科学常用的包

    以前一直用ubantu下的python,ubantu比较卡.自己倾向于使用centos,但默认的python版本太低,所以重新装了一个python和ipython centos6.5安装python2 ...

  9. mysql在表的某一位置增加一列的命令

    如果想在一个已经建好的表中添加一列,可以用诸如: alter table t1 add column addr varchar(20) not null; 这条语句会向已有的表t1中加入一列addr, ...

  10. 区间dp的感悟

    学区间dp似乎也很久了...对区间dp的通用模型都了解了一些 但是做题还是很坑 上了一点难度的题基本想不出什么思路.. 目前的做题方式就是看题 想一会发现自己不会做 看题解 好巧妙啊 理解后写一发.. ...