簡介
CKEditor是一個(gè)富文本編輯器。是一種內(nèi)嵌于網(wǎng)站中，呈現(xiàn)一種所見即所得的頁面效果。常見于博客類型網(wǎng)站、或者電商網(wǎng)站管理系統(tǒng)中對(duì)商品文案的編輯功能。
基本使用
1、首先，下載地址：https://ckeditor.com/ckeditor-4/download/ 下載之后將下載包中的js和css導(dǎo)入項(xiàng)目中。
2、然后，寫一個(gè)簡單的帶一個(gè)textarea的頁面。
<html>
<head>
<title>Title</title>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="blog.do" enctype="multipart/form-data">
<input type="hidden" name="m" value="add">
<input type="text" name="title" placeholder="請(qǐng)輸入標(biāo)題"/><br/>
<textarea
class="ckeditor"
name="content" cols="120" rows="15" placeholder="請(qǐng)輸入內(nèi)容"></textarea>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
CKEDITOR.replace('content', {
"filebrowserUploadUrl" : "upload"
});
</script>
</body>
</html>
3、接下來，編寫頁面需要的上傳和下載，顯示圖片的servlet。代碼如下：
package com.qianfeng.day9.servlet;
import com.qianfeng.day9.util.Constants;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
@WebServlet("/file.do")
public class FileServlet extends BaseServlet {
public void show(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
try {
File file = new File(Constants.IMAGE_PATH + name);
FileInputStream inputStream = new FileInputStream(file);
OutputStream outputStream = response.getOutputStream();
byte [] buffer = new byte[1024];
int len = 0;
while ((len = inputStream.read(buffer)) != -1){
outputStream.write(buffer, 0, len);
outputStream.flush();
}
outputStream.close();
inputStream.close();
}catch (Exception e){
e.printStackTrace();
}
}
public void download(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
try {
response.setHeader("Content-Disposition", "attachment;fileName="+"1.jpg");
File file = new File(Constants.IMAGE_PATH + name);
FileInputStream inputStream = new FileInputStream(file);
OutputStream outputStream = response.getOutputStream();
byte [] buffer = new byte[1024];
int len = 0;
while ((len = inputStream.read(buffer)) != -1){
outputStream.write(buffer, 0, len);
outputStream.flush();
}
outputStream.close();
inputStream.close();
}catch (Exception e){
e.printStackTrace();
}
}
}
package com.qianfeng.day9.servlet;
import com.qianfeng.day9.util.Constants;
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;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.UUID;
@MultipartConfig
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
Part part = request.getPart("upload");
PrintWriter out = response.getWriter();
// 文件名稱
String name = UUID.randomUUID().toString().replaceAll("-", "");
part.write(Constants.IMAGE_PATH + name);
String callback = request.getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +
request.getContextPath() + "/file.do?m=show&name="+ name + "','')");
out.println("</script>");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
總結(jié)
按照如上3個(gè)步驟，基本可以演示一個(gè)完整的CKEditor的使用。
