JSP第十四次課：JSP項目開發高級操做2---在線編輯器應用及前臺首頁顯示商品

時間 2020-08-26

標籤 jsp 第十四次項目開發高級在線編輯器應用前臺首頁顯示商品欄目 JSP 简体版

原文原文鏈接

1、在線編輯器KindEditor下載javascript

下載 KindEditor 最新版本，下載以後打開 examples/index.html 就能夠看到演示。php

下載頁面: http://www.kindsoft.net/down.phpcss

2、部署編輯器html

（1）解壓 kindeditor-x.x.x.zip 文件，重命名kindeditor，將全部文件上傳到您的網站程序目錄裏，java

例如：http://localhost/shop/kindeditor/(shop爲網站名)，json

Note服務器

您能夠根據需求刪除如下目錄後上傳到服務器。asp.net

asp - ASP程序（刪除）jsp
asp.net - ASP.NET程序（刪除）編輯器
php - PHP程序（刪除）
jsp - JSP程序(保留)
examples - 演示文件(保留)

（2）將jsp文件夾下/lib目錄下3個jar文件複製到Tomcat/lib目錄下或shop/WEB-INF/lib目錄下

commons-fileupload-1.2.1.jar

commons-io-1.4.jar

json_simple-1.1.jar

若是使用MyEclipse須要添加擴展包

（3）將/kendeditor/jsp文件夾下upload_json.jsp,file_manager_json.jsp剪切到/kendeditor/目錄下

（4）將/kendeditor目錄下attached放到網站根目錄（shop下）

3、在線編輯器使用（jsp文件夾下demo.jsp文件，因爲相關文件位置發生了變化，相應路徑發生變化）

將jsp文件夾下demo.jsp文件另存到shop/admin/目錄下

shop/admin/demo.jsp

shop/kindeditor/相關在線編輯器文件

demo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
   <meta charset="utf-8" />
   <title>KindEditor JSP</title>
   <link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
   <link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />
   <script charset="utf-8" src="../kindeditor/kindeditor.js"></script>
   <script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>
   <script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
   <script>
       KindEditor.ready(function(K) {
           var editor1 = K.create('textarea[name="content1"]', {
               cssPath : '../ kindeditor/plugins/code/prettify.css',
               uploadJson : '../ kindeditor/upload_json.jsp',
               fileManagerJson : '../ kindeditor/file_manager_json.jsp',
               allowFileManager : true,
               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>
</head>
<body>
   <%=htmlData%>
   <form name="example" method="post" action="demo.jsp">
       <textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
       <br />
       <input type="submit" name="button" value="提交內容" /> (提交快捷鍵: Ctrl + Enter)
   </form>
</body>
</html>
<%!
private String htmlspecialchars(String str) {
   str = str.replaceAll("&", "&");
   str = str.replaceAll("<", "<");
   str = str.replaceAll(">", ">");
   str = str.replaceAll("\"", """);
   return str;
}

4、實現商品描述功能

添加商品頁面中的「商品描述」應用「在線編輯器」完成

將demojsp內容複製到good_add.jsp文件中相應位置

將content1 更改成content，因爲位置不少，採用替換方式

將表單名example替換爲form（script也包含）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="mybean.*,java.util.*"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content") != null ? request.getParameter("content") : "";
%>
<!doctype html>
<html>
<head>
   <meta charset="utf-8" />
   <title>KindEditor JSP</title>
   <link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
   <link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />
   <script charset="utf-8" src="../kindeditor/kindeditor.js"></script>
   <script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>
   <script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
   <script>
       KindEditor.ready(function(K) {
           var editor1 = K.create('textarea[name="content"]', {
               cssPath : '../kindeditor/plugins/code/prettify.css',
               uploadJson : '../kindeditor/upload_json.jsp',
               fileManagerJson : '../kindeditor/file_manager_json.jsp',
               allowFileManager : true,
               afterCreate : function() {
                   var self = this;
                   K.ctrl(document, 13, function() {
                       self.sync();
                       document.forms['form1'].submit();
                   });
                   K.ctrl(self.edit.doc, 13, function() {
                       self.sync();
                       document.forms['form1'].submit();
                   });
               }
           });
           prettyPrint();
       });
   </script>

</head>
<body>
   <%=htmlData%>

   <form id="form1" name="form1" method="post" action="good_doAdd.jsp">
<table border="1" cellspacing="0">
    <tr>
      <td width="100">商品名稱</td>
      <td><input type="text" name="name" id="name" /></td>
    </tr>
     <tr>
      <td>商品圖片</td>
      <td><input type="text" size=40 name="picture" id="picture" value="" /> <input type="button" id="p_w_picpath1" value="瀏覽" /></td>
    </tr>
    <tr>
      <td>商品描述</td>
      <td><textarea name="content" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea></td>
    </tr>
    <tr>
      <td>商品價格</td>
      <td><input type="text" name="price" id="price" /></td>
    </tr>
    <tr>
      <td>商品數量</td>
      <td><input type="text" name="num" id="num" /></td>
    </tr>
    <tr>
      <td>商品類型</td>
      
         <td>
             <select name="type" id="type">
             <option value="">--商品類型--</option>
             <%
             TypeGoodsDAO tdao=new TypeGoodsDAO();
             LinkedList<TypeGoods> ts=tdao.list();
             for(TypeGoods t:ts){
              %>

                  <option value="<%=t.getTypeId()%>"><%=t.getTypeName()%></option>

            <%} %>
          </select></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value="提交"/></td>
    </tr>
</table>
</form>




</body>
</html>
<%!
private String htmlspecialchars(String str) {
   str = str.replaceAll("&", "&");
   str = str.replaceAll("<", "<");
   str = str.replaceAll(">", ">");
   str = str.replaceAll("\"", """);
   return str;
}
%>