这和一篇与上一篇的区别在与，上一篇是直接请求到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. PHP验证是否为图片格式文件

    /** * 判断是否为图片格式(jpg/jpeg/gif/png)文件 * * @param string $filePath * @return bool|string */ function is ...

  2. java中如何高效判断数组中是否包含某个特定的值

    四种不同方式检查数组是否包含某个值 使用List: public static boolean useList(String[] arr, String targetValue) { return A ...

  3. Docker 共享存储解决方案Rex-Ray

    github地址:https://github.com/rexray/rexray 安装: curl -sSL https://rexray.io/install | sh - 生成配置文件: htt ...

  4. linux 上传scp 压缩tar命令

    1.Linux 上传scp 1)上传文件与文件夹 scp file weblogic@xx.xxx.xxx.xxx:~/songjd/ scp -r filefolder weblogic@xxx.x ...

  5. JDK各个版本的新特性jdk1.5-jdk8[转]

    JDK各个版本的新特性 对于很多刚接触java语言的初学者来说,要了解一门语言,最好的方式就是要能从基础的版本进行了解,升级的过程,以及升级的新特性,这样才能循序渐进的学好一门语言.今天先为大家介绍一 ...

  6. VC读取文件内容

    // chopper.cpp : Defines the entry point for the console application. // #include "stdafx.h&quo ...

  7. Java编程思想 两个主函数

    //: initialization/DynamicArray.javapackage initialization; /* Added by Eclipse.py */// Array initia ...

  8. Pycharm更换pip源为国内

    Python里的pip是官方自带的源,国内使用pip安装的时候十分缓慢,所以最好是更换成中国国内的源地址. 目前国内靠谱的 pip 镜像源有: 清华: https://pypi.tuna.tsingh ...

  9. JQuery调用iframe子页面函数/对象的方法例子

    父页面有个ID为mainfrm.name为Iframe1的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: $("#mainfr ...

  10. npm全局安装

    时间长了,很多东西都忘了. 全局安装以后,在你自己的电脑任何位置都可以使用的包.直接用命令使用的: 比如:supervisor mok 还有cnpm,express之类的.gulp之类的. 剩下的我们 ...