Ckeditor一种很方便的文本编辑器

ckeditor官网：http://ckeditor.com/

这里介绍ckeditor的其中一个的用法，自己做小项目练手非常的适合，上手非常的快。

首先去官网下载这个东西，链接：http://pan.baidu.com/s/1nuXePuD 密码：rrr0，需要特别说明一下，这个东西需要配置，但是具体配置我也不是很清楚，所以你看到着篇博客，练习的话，最后使用上面上传的这个东西，目录呢，如图所示。

---

1：首先将这个ckeditor文件夹放到webcontent目录下面，然后进行开发。

　　使用这个文本编辑器的最重要需要引入的一句话是：

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

　　然后在需要使用的地方引入这个：class="ckeditor"，如下所示：

　　<textarea  class="ckeditor" id="newsContent"  name="newsContent"   rows="15"   placeholder="请输入内容">　　　         </textarea>

完整的代码如下所示，文件名是news.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <%
     //获取绝对路径路径 ,开发项目一定要使用绝对路径，不然肯定出错
     String path = request.getContextPath();
     String basePath = request.getScheme() + "://"
                 + request.getServerName() + ":" + request.getServerPort()
                 + path + "/";
 %>
 <!DOCTYPE html >
 <html>
 <head>
 <base href="<%=basePath%>">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>新闻发布</title>

 <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="resource/css/bootstrap.min.css">

 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
 <script src="resource/js/jquery.min.js"></script>

 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="resource/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>
 </head>
 <body>
     <div class="container">
         <h1 class="page-header">新闻发布</h1>
         <form class="form-horizontal" action="newsServlet" method="post">
             <div class="form-group">
                 <label for="newsMan" class="col-sm-1 control-label">发布人</label>
                 <div  class="col-sm-4">
                     <input  class="form-control " name="newsMan" id="newsMan" placeholder="请输入发布人"/>
                 </div>
             </div>
             <div class="form-group">
                 <label for="newsTitle" class="col-sm-1 control-label">新闻标题</label>
                 <div  class="col-sm-6">
                     <input  class="form-control " name="newsTitle" id="newsTitle" placeholder="请输入新闻标题"/>
                 </div>
             </div>
             <div class="form-group">
                 <label for="newsContent" class="col-sm-1 control-label">新闻内容</label>
                 <div  class="col-sm-11">
                     <textarea  class="ckeditor" id="newsContent"  name="newsContent"   rows="15"   placeholder="请输入内容"></textarea>
                 </div>
             </div>

             <div class="form-group">
                 <div  class="col-sm-4 col-sm-offset-1">
                     <input type="submit" value="发 布 新 闻 " class="btn btn-success btn-lg"/>
                 </div>
             </div>
         </form>
     </div>
 </body>
 </html>

2:这个jsp提交到servlet这个页面，完整代码如下所示，当然了，这里没有设计到数据库，因为涉及到数据库，更难理解和讲解，这里学会使用，自己摸索不是很难哦。

文件名是：NewsServlet.java

 package com.liu.servlet;

 import java.io.IOException;
 import javax.servlet.ServletException;
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;

 @WebServlet("/newsServlet")
 public class NewsServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         //设置字符编码格式
         request.setCharacterEncoding("utf-8");

         //获取从前台传来的参数
         String newsMan = request.getParameter("newsMan");
         String newsTitle = request.getParameter("newsTitle");
         String newsContent = request.getParameter("newsContent");

         //控制台输出测试内容
         System.out.println("newsMan:"+newsMan);
         System.out.println("newsTitle:"+newsTitle);
         System.out.println("newsContent:"+newsContent);

         //将获取的参数保存到request域中
         request.setAttribute("newsMan", newsMan);
         request.setAttribute("newsTitle", newsTitle);
         request.setAttribute("newsContent", newsContent);

         //重定向操作
         request.getRequestDispatcher("/index.jsp").forward(request, response);
     }

 }

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

 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <%
     //获取绝对路径路径 ,开发项目一定要使用绝对路径，不然肯定出错
     String path = request.getContextPath();
     String basePath = request.getScheme() + "://"
                 + request.getServerName() + ":" + request.getServerPort()
                 + path + "/";
 %>
 <!DOCTYPE html >
 <html>
 <head>
 <base href="<%=basePath%>">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>新闻发布</title>

 <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="resource/css/bootstrap.min.css">

 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
 <script src="resource/js/jquery.min.js"></script>

 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="resource/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>
 </head>
 <body>
     <div class="container">
     <h1 class="page-header">查看新闻</h1>
     <form class="form-horizontal" action="newsServlet" method="post">
             <div class="form-group">
                 <label for="newsMan" class="col-sm-1 control-label">发布人</label>
                 <div  class="col-sm-4">
                     <p class="form-control-static">${newsMan }</p>
                 </div>
             </div>
             <div class="form-group">
                 <label for="newsTitle" class="col-sm-1 control-label">新闻标题</label>
                 <div  class="col-sm-6">
                     <p class="form-control-static">${newsTitle }</p>
                 </div>
             </div>
             <div class="form-group">
                 <label for="newsContent" class="col-sm-1 control-label">新闻内容</label>
                 <div  class="col-sm-11">
                     <p class="form-control-static">${newsContent }</p>
                 </div>
             </div>
         </form>
     </div>
 </body>
 </html>

4：特比需要注意的是下面这个servlet，只要复制粘贴会使用即可，可先不用看代码；

 package com.liu.servlet;

 import java.io.IOException;
 import java.io.PrintWriter;
 import java.util.UUID;

 import javax.servlet.ServletException;
 import javax.servlet.annotation.MultipartConfig;
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.Part;

 @WebServlet("/upLoad")
 @MultipartConfig
 public class UpLoadServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         request.setCharacterEncoding("utf-8");

         //获取文件的part
         Part part = request.getPart("upload");

         //获取请求的信息
         String requestinfo = part.getHeader("content-disposition");
         System.out.println(requestinfo);

         //获取文件的后缀名
         String str = requestinfo.substring(requestinfo.lastIndexOf("."),requestinfo.length()-1);
         System.out.println("后缀名:"+str);

         //获取上传文件的目录
         String root = request.getServletContext().getRealPath("//upload");
         System.out.println(root);

         //重新创建文件名
         String filename = UUID.randomUUID().toString()+str;
         String url = root+"\\"+filename;
         System.out.println(url);
         part.write(url);

         //响应
         PrintWriter out = response.getWriter();
         //获取路径
         String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();

         String callback = request.getParameter("CKEditorFuncNum");

         out.print("<script>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+basePath+request.getContextPath()+"/upload/"+filename+"') </script>");

         out.flush();
         out.close();
     }

 }

5：最后说一下需要注意的地方：

其一就是如下图所示的config.js文件，这里需要修改一下文件内容

如下图所示，将ckeditor修改为自己的项目名称即可；

演示效果：

还有完善的空间，继续加油哦。别先生