Ckeditor一種很方便的文本編輯器

時間 2019-11-30

標籤 ckeditor 一種方便文本編輯器简体版

原文原文鏈接

ckeditor官網： http://ckeditor.com/javascript

這裏介紹ckeditor的其中一個的用法，本身作小項目練手很是的適合，上手很是的快。css

首先去官網下載這個東西，連接：http://pan.baidu.com/s/1nuXePuD 密碼：rrr0，須要特別說明一下，這個東西須要配置，可是具體配置我也不是很清楚，因此你看到着篇博客，練習的話，最後使用上面上傳的這個東西，目錄呢，如圖所示。html

1：首先將這個ckeditor文件夾放到webcontent目錄下面，而後進行開發。java

　　使用這個文本編輯器的最重要須要引入的一句話是：jquery

　　<script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>web

　　而後在須要使用的地方引入這個：class="ckeditor"，以下所示：數據庫

　　<textarea class="ckeditor" id="newsContent" name="newsContent" rows="15" placeholder="請輸入內容">　　　 </textarea>bootstrap

完整的代碼以下所示，文件名是news.jspdom

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4     //獲取絕對路徑路徑 ,開發項目必定要使用絕對路徑，否則確定出錯
 5     String path = request.getContextPath();
 6     String basePath = request.getScheme() + "://"
 7                 + request.getServerName() + ":" + request.getServerPort()
 8                 + path + "/";
 9 %> 
10 <!DOCTYPE html >
11 <html>
12 <head>
13 <base href="<%=basePath%>">
14 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
15 <title>新聞發佈</title>
16 
17 <!-- 新 Bootstrap 核心 CSS 文件 -->
18 <link rel="stylesheet" href="resource/css/bootstrap.min.css">
19 
20 <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
21 <script src="resource/js/jquery.min.js"></script>
22 
23 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
24 <script src="resource/js/bootstrap.min.js"></script>
25 
26 <script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>
27 </head>
28 <body>
29     <div class="container">
30         <h1 class="page-header">新聞發佈</h1>
31         <form class="form-horizontal" action="newsServlet" method="post">
32             <div class="form-group">
33                 <label for="newsMan" class="col-sm-1 control-label">發佈人</label>
34                 <div  class="col-sm-4">
35                     <input  class="form-control " name="newsMan" id="newsMan" placeholder="請輸入發佈人"/>
36                 </div>
37             </div>
38             <div class="form-group">
39                 <label for="newsTitle" class="col-sm-1 control-label">新聞標題</label>
40                 <div  class="col-sm-6">
41                     <input  class="form-control " name="newsTitle" id="newsTitle" placeholder="請輸入新聞標題"/>
42                 </div>
43             </div>
44             <div class="form-group">
45                 <label for="newsContent" class="col-sm-1 control-label">新聞內容</label>
46                 <div  class="col-sm-11">
47                     <textarea  class="ckeditor" id="newsContent"  name="newsContent"   rows="15"   placeholder="請輸入內容"></textarea>
48                 </div>
49             </div>
50             
51             <div class="form-group">
52                 <div  class="col-sm-4 col-sm-offset-1">
53                     <input type="submit" value="發 布 新 聞 " class="btn btn-success btn-lg"/>
54                 </div>
55             </div>
56         </form>    
57     </div>
58 </body>
59 </html>

2:這個jsp提交到servlet這個頁面，完整代碼以下所示，固然了，這裏沒有設計到數據庫，由於涉及到數據庫，更難理解和講解，這裏學會使用，本身摸索不是很難哦。jsp

文件名是：NewsServlet.java

 1 package com.liu.servlet;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.annotation.WebServlet;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 @WebServlet("/newsServlet")
11 public class NewsServlet extends HttpServlet {
12     
13 
14     private static final long serialVersionUID = 1L;
15 
16     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
17         //設置字符編碼格式
18         request.setCharacterEncoding("utf-8");
19         
20         //獲取從前臺傳來的參數
21         String newsMan = request.getParameter("newsMan");
22         String newsTitle = request.getParameter("newsTitle");
23         String newsContent = request.getParameter("newsContent");
24         
25         //控制檯輸出測試內容
26         System.out.println("newsMan:"+newsMan);
27         System.out.println("newsTitle:"+newsTitle);
28         System.out.println("newsContent:"+newsContent);
29         
30         //將獲取的參數保存到request域中
31         request.setAttribute("newsMan", newsMan);
32         request.setAttribute("newsTitle", newsTitle);
33         request.setAttribute("newsContent", newsContent);
34         
35         //重定向操做
36         request.getRequestDispatcher("/index.jsp").forward(request, response);
37     }
38 
39 }

3:上面的servlet頁面又重定向到了index.jsp,以下所示：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%
 4     //獲取絕對路徑路徑 ,開發項目必定要使用絕對路徑，否則確定出錯
 5     String path = request.getContextPath();
 6     String basePath = request.getScheme() + "://"
 7                 + request.getServerName() + ":" + request.getServerPort()
 8                 + path + "/";
 9 %> 
10 <!DOCTYPE html >
11 <html>
12 <head>
13 <base href="<%=basePath%>">
14 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
15 <title>新聞發佈</title>
16 
17 <!-- 新 Bootstrap 核心 CSS 文件 -->
18 <link rel="stylesheet" href="resource/css/bootstrap.min.css">
19 
20 <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
21 <script src="resource/js/jquery.min.js"></script>
22 
23 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
24 <script src="resource/js/bootstrap.min.js"></script>
25 
26 <script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>
27 </head>
28 <body>
29     <div class="container">
30     <h1 class="page-header">查看新聞</h1>
31     <form class="form-horizontal" action="newsServlet" method="post">
32             <div class="form-group">
33                 <label for="newsMan" class="col-sm-1 control-label">發佈人</label>
34                 <div  class="col-sm-4">
35                     <p class="form-control-static">${newsMan }</p>
36                 </div>
37             </div>
38             <div class="form-group">
39                 <label for="newsTitle" class="col-sm-1 control-label">新聞標題</label>
40                 <div  class="col-sm-6">
41                     <p class="form-control-static">${newsTitle }</p>
42                 </div>
43             </div>
44             <div class="form-group">
45                 <label for="newsContent" class="col-sm-1 control-label">新聞內容</label>
46                 <div  class="col-sm-11">
47                     <p class="form-control-static">${newsContent }</p>
48                 </div>
49             </div>
50         </form>
51     </div>
52 </body>
53 </html>

4：特比須要注意的是下面這個servlet，只要複製粘貼會使用便可，可先不用看代碼；

 1 package com.liu.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.UUID;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.annotation.MultipartConfig;
 9 import javax.servlet.annotation.WebServlet;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 import javax.servlet.http.Part;
14 
15 @WebServlet("/upLoad")
16 @MultipartConfig
17 public class UpLoadServlet extends HttpServlet {
18 
19 
20     private static final long serialVersionUID = 1L;
21 
22     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
23         request.setCharacterEncoding("utf-8");
24         
25         //獲取文件的part
26         Part part = request.getPart("upload");
27         
28         //獲取請求的信息
29         String requestinfo = part.getHeader("content-disposition");
30         System.out.println(requestinfo);
31         
32         //獲取文件的後綴名
33         String str = requestinfo.substring(requestinfo.lastIndexOf("."),requestinfo.length()-1);
34         System.out.println("後綴名:"+str);
35         
36         //獲取上傳文件的目錄
37         String root = request.getServletContext().getRealPath("//upload");
38         System.out.println(root);
39         
40         //從新建立文件名
41         String filename = UUID.randomUUID().toString()+str;
42         String url = root+"\\"+filename;
43         System.out.println(url);
44         part.write(url);
45         
46         
47         //響應
48         PrintWriter out = response.getWriter();
49         //獲取路徑
50         String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
51 
52         String callback = request.getParameter("CKEditorFuncNum");
53         
54         out.print("<script>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+basePath+request.getContextPath()+"/upload/"+filename+"') </script>");
55         
56         out.flush();
57         out.close();
58     }
59 
60 }