CKEditor的使用

简介

CKEditor是一个富文本编辑器。是一种内嵌于网站中,呈现一种所见即所得的页面效果。常见于博客类型网站、或者电商网站管理系统中对商品文案的编辑功能。

基本使用

1、首先,下载地址:https://ckeditor.com/ckeditor-4/download/ 下载之后将下载包中的js和css导入项目中。

2、然后,写一个简单的带一个textarea的页面。

Title


class="ckeditor"

name="content" cols="120" rows="15" placeholder="请输入内容">

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的使用。

你可能感兴趣的:(CKEditor的使用)