一：HTML文本編譯器 kindeditor-4.1.10 的使用 SpringMVC+jsp的實現

時間 2019-11-11

標籤 html 文本編譯器 kindeditor 4.1.10 使用 springmvc+jsp springmvc jsp 實現欄目 HTML 简体版

原文原文鏈接

一：我用的kindeditor版本是4.1.10 下載完成打開目錄結構以下：javascript

二：下面是工程目錄也很重要，css

三：好了，準備工做已經作好了，如今就直接上代碼了。首先是頁面JSP代碼比較簡單，，基本上就是從下載下來的插件裏面有demo頁面拷貝的代碼稍加改動一下就行了。html

<%@ 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+"/";
%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!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="/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) {
            var editor1 = K.create('textarea[name="content1"]', {
                cssPath : '${ctx }/res/textEdit/plugins/code/prettify.css',
                uploadJson : '${ctx }/test/test', 
                fileManagerJson : '${ctx }/test/test',
                allowFileManager : true,
                
                  //獲取圖片上傳成功事後返回的圖片地址    
                  afterUpload: function (url) {
                      K('#txtImgPath').val(url);
                  },
                
                afterCreate : function() {            
                    var self = this;        
                    K.ctrl(document, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                },
    
            });
            prettyPrint();
        });
  </script>
  
  <body>
                                                                                                                                                                                                                                                                                                                                                                                                                                
  <hr/> 
           <br/><br/>
           <!--顯示圖片上傳成功事後返回的圖片地址  -->
           <p>圖片地址：<input type="text" id="txtImgPath"  style="width:300px;"/></p>
           <hr/>
           
           <form name="example" action="${ctx }/notice/addNoticetwo" 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>
               <p>標題：<input type="text" name="title"/></p>
               <p>是否容許評論：<input type="text" name="commentsDisallowed"/></p>
               <p>摘要<input type="text" name="excerpt"/></p>
               <p>
                  內容：<textarea name="content1" id="content1" 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 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>

下面是此文本編譯器的頁面展現：
java

下面是Action後臺代碼：jquery

　　//注意： @RequestParam("imgFile") MultipartFile idimg 這裏面的imgFile 是kindeditor 上傳圖片的默認名   

    @RequestMapping(value="/test/test",method=RequestMethod.POST)
    public void test(@RequestParam("imgFile") MultipartFile idimg,HttpServletResponse response,HttpServletRequest request) throws IOException{
        //ajax 請求處理中文亂碼
        request.setCharacterEncoding("gb2312"); 
        response.setContentType("text/html;charset=utf-8");
            
        //獲取系統的臨時路徑  C:\Users\admin\AppData\Local\Temp\
        String temporaryPath= System.getProperty("java.io.tmpdir"); 
        //獲取文件名字  如 :123.JPG
        String fileName=idimg.getOriginalFilename();
        //獲取內容
        String content=request.getParameter("content1");
        
        // 轉存文件  
        //transferTo()： 次方方爲springMVC框架 保存圖片的方法
        idimg.transferTo(new File(temporaryPath + fileName));
        
        //如今既然已經將文件寫入到了文件夾， 接下來就是把文件的地址存到數據庫了，這個我代碼沒有寫，
        //  temporaryPath + fileName  就是寫入文件的全路徑
        //  代碼省略  。。。。。。
        
        
        //返回ajax內容
        PrintWriter pw = response.getWriter();
        String img="http://www.baidu.com/img/bd_logo1.png"; //這是一個圖片的地址我隨便找了一個寫死的 只爲測試
        
        //下面這行代碼纔是讓我發瘋的地方，這個地方返回的事一個json串，以前這個串裏的參數我不知道寫什麼，
        //試了好屢次好多種都不行，最主要的是不知道是否是這裏的錯，糾結了很久，最後在一位同行的代碼中找到了這
        //行代碼，拷貝過來就能夠了，讓我糾結一天不知道哪裏出錯的地方原來就是這一行代碼。。。。。
        pw.write("{\"error\":0,\"url\":\"" +img+"\"}");       
    
    }

　如上這樣寫的編譯器有個致命的弱點，就是返回的圖片URL 必須是網絡上服務器上的到頁面才能夠展現，要是拿的本地圖片是展現不出來的，　
還有上傳多張圖片，百度地圖等功能尚未寫，，哎，，但願獲得哪位大神指點吧！ajax

相關標籤/搜索