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

    函数原型: void* memcpy(void *dst,void const *src,size_t count) void* memmove(void *dst,void const *src,s ...

  2. mongodb $where 查询中的坑

    mongodb 查询中坑就是数字开头的字段不能用点号,只能用[""].例如: 即:db.datas.find({$where:"this['54bcfc6c329af61 ...

  3. python批量修改文件名称

    参考文章:http://www.cnblogs.com/ma6174/archive/2012/05/04/2482378.html 最近遇到一个问题,在网上下载了一批视频课程,需要将每节课的名称标号 ...

  4. CentOS/Linux 卸载MATLAB

    rm -rf /usr/local/MATLAB/R2012arm /usr/local/bin/matlab /usr/local/bin/mcc /usr/local/bin/mex /usr/l ...

  5. kafka笔记（一）

    1.kafka应用场景 基于流数据的发布订阅消息系统.实时流数据的高效异步通信.基于流数据的高可用分布式存储! 不同的系统之间实时流数据管道; 2.官方一句话概括 kafka是一个分布式流数据平台:可 ...

  6. Java -- JDBC mysql读写大数据，文本 和 二进制文件

    1. 往mysql中读写字符文本 public class Demo1 { /* 创建数据库 create database LOBTest; use LOBTest; create table te ...

  7. QT QDockWidget锚接部件 和 QTreeWidget 树形部件 构成树形选择项

    1.  如图,在mainwindow中 添加DockWidget到右侧,里面镶嵌TreeWidget. 2. QTreeWidget *treeWidget = new QTreeWidget; // ...

  8. sql中的group by 和 having 用法

    sql中的group by 用法:-- Group By语句从英文的字面意义上理解就是“根据(by)一定的规则进行分组(Group)”.--它的作用是通过一定的规则将一个数据集划分成若干个小的区域,然 ...

  9. R语言：导入导出数据

    主要学习如何把几种常用的数据格式导入到R中进行处理,并简单介绍如何把R中的数据保存为R数据格式和csv文件. 1.保存和加载R的数据(与R.data的交互:save()函数和load()函数) a & ...

  10. 时间服务器： NTP 服务器及客户端搭建

    时间服务器: NTP 服务器及客户端搭建 一. NTP 服务器的安装与设定 1. NTP 服务器的安装与设定前言 2. 所需软件与软件结构 3. 主要配置文件 ntp.conf 的处理 4. NTP ...