简介
CKEditor是一个富文本编辑器。是一种内嵌于网站中,呈现一种所见即所得的页面效果。常见于博客类型网站、或者电商网站管理系统中对商品文案的编辑功能。
基本使用
1、首先,下载地址:https://ckeditor.com/ckeditor-4/download/ 下载之后将下载包中的js和css导入项目中。
2、然后,写一个简单的带一个textarea的页面。
CKEDITOR.replace('content', {
"filebrowserUploadUrl" : "upload"
});
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("");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
总结
按照如上3个步骤,基本可以演示一个完整的CKEditor的使用。