javascript
JSP第十四次课：JSP项目开发高级操作2---在线编辑器应用及前台首页显示商品
一、在線編輯器KindEditor下載
下載 KindEditor 最新版本，下載之后打開 examples/index.html 就可以看到演示。
下載頁面: http://www.kindsoft.net/down.php
二、部署編輯器
?? （1） 解壓 kindeditor-x.x.x.zip 文件，重命名kindeditor，將所有文件上傳到您的網站程序目錄里，
????例如：http://localhost/shop/kindeditor/(shop為網站名)，
Note
您可以根據需求刪除以下目錄后上傳到服務器。
asp - ASP程序（刪除）
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下）
三、在線編輯器使用（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;
}
%>
四、實現商品描述功能
添加商品頁面中的“商品描述”應用“在線編輯器”完成
將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>
??????? <option value="1">電腦</option>
??????? <option value="2">手機</option>
??????? <option value="3">電動車</option>
??????? <option value="4">洗衣機</option>
??????? <option value="5">MP3</option>
????? </select></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;
}
%>
五、實現商品圖片上傳
1、good_add.jsp相應位置添加代碼
?? <tr>
????? <td>商品圖片</td>
????? <td><input type="text" size=40 name="picture" id="picture" value="" /> <input type="button" id="p_w_picpath1" value="瀏覽" /></td>
??? </tr>
2、good_add.jsp添加腳本（復制example/p_w_picpath-dialog.html部分內容）
<script type="text/javascript">
?? ?KindEditor.ready(function(K) {
?? ??? ??? ??? ?var editor = K.editor({
?? ??? ??? ??? ?uploadJson : '../kindeditor/upload_json.jsp',
?? ??? ??? ??? ?fileManagerJson : '../kindeditor/file_manager_json.jsp',
?? ??? ??? ??? ??? ?allowFileManager : true
?? ??? ??? ??? ?});
?? ??? ??? ??? ?K('#p_w_picpath1').click(function() {
?? ??? ??? ??? ??? ?editor.loadPlugin('p_w_picpath', function() {
?? ??? ??? ??? ??? ??? ?editor.plugin.p_w_picpathDialog({
?? ??? ??? ??? ??? ??? ??? ?p_w_picpathUrl : K('#picture').val(),
?? ??? ??? ??? ??? ??? ??? ?clickFn : function(url, title, width, height, border, align) {
?? ??? ??? ??? ??? ??? ??? ??? ?K('#picture').val(url);
?? ??? ??? ??? ??? ??? ??? ??? ?editor.hideDialog();
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?});
?? ??? ?});
?? ?</script>
3、添加以下語句實現獲得上傳文件
? uploadJson : '../kindeditor/upload_json.jsp',
? fileManagerJson : '../kindeditor/file_manager_json.jsp',
轉載于:https://blog.51cto.com/dyzyxy/1625830
總結
以上是生活随笔為你收集整理的JSP第十四次课：JSP项目开发高级操作2---在线编辑器应用及前台首页显示商品的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 全战三国孙尚香怎么娶 全全半全全全半怎么
- 下一篇： Spring中的AOP——在Advice