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

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

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

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

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


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一种很方便的文本编辑器

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

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

演示效果:

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

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

上一篇:[JavaEE] NIO与IO的区别


下一篇:腾讯云点播视频存储(Web端视频上传)