这和一篇与上一篇的区别在与，上一篇是直接请求到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. linux 安装tomcat7

    wget http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/v7.0.81/bin/apache-tomcat-7.0.81.tar.gz 解压安装包 t ...

  2. C# 处理base64 以及base64的原理分析

    base64的原理, http://www.cnblogs.com/diligenceday/p/6002382.html http://www.cnblogs.com/chengxiaohui/ar ...

  3. django学习笔记整理（1）django的MTV模式

    django作为一个python的网络编程的框架,自然有着其规律可循.通过对django的了解,也明白了一些网络编程的知识.最近这近一个月,在网上查了许多文字资料,也看了别人的视频之类的资料,也算是对 ...

  4. waitpid使用的一点问题

    使用waipid的时候遇到了一个奇怪的问题,将情况简化后描述一下. 有关waitpid的基本介绍参见这里一下:http://www.cnblogs.com/mickole/p/3187770.html ...

  5. UOJ67 新年的毒瘤

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. IDEA字体设置

    最近编码总是把","和"."搞错,字体实在是太小了,看不清,而且g的显示各个字体显示也是不一样,看的十分难受,果断换字体.分享一下在IDEA2017.2.5中如 ...

  7. Guest CPU model configuration in libvirt with QEMU/KVM

    每个hypervisor对于guest能看到的cpu model定义都不同,Xen 提供host pass through,所以guest能看到的cpu和host完全相同. QEMU/KVM中gues ...

  8. iOS系统声音服务(System Sound Services)

    系统声音服务(System Sound Services)提供了一个接口,用于播放不超过30秒的声音.它支持的文件格式有限,具体地说只有CAF.AIF和使用PCM或IMA/ADPCM数据的WAV文件. ...

  9. print webpage

    使用浏览器打印网页时(A4纸)有一个固定的尺寸: 高级浏览器: width:700px height:1000px

  10. hzau 1204 Escape from the Darkness

    1204: Escape from the Darkness Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 93  Solved: 3[Submit] ...