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

最新推荐文章于 2024-08-11 20:00:32 发布

weixin_30562507

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量67

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/sunhaoyu/p/4754601.html

版权

这和一篇与上一篇的区别在与，上一篇是直接请求到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 项目下对应的文件里

转载于:https://www.cnblogs.com/sunhaoyu/p/4754601.html

weixin_30562507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现

这和一篇与上一篇的区别在与，上一篇是直接请求到action我们剩下的都是我们全部手动处理，而这一片篇是由kindeditor内部处理，图片上传到本地，基本上没什么区别，但是有一点一定要注意的就是，这里面在jsp下有一个lib目录，里面有三个jar文件，一定要将这个三个jar文件考培到tomcat的lib目录下。　　首先还是先看下目录吧下面还有修改一下jsp目录下的 f...
复制链接

扫一扫