在线编辑器CKeditor的应用

最新推荐文章于 2020-12-19 21:12:43 发布

moneyZhong

最新推荐文章于 2020-12-19 21:12:43 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javaWeb开发实用案例文章标签： CKeditor应用实例

本文链接：https://blog.youkuaiyun.com/moneyzhong/article/details/8775335

javaWeb开发实用案例专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在项目中应用CKeditor 3.2版本，包括下载解压、导入smartupload.jar包、创建upload文件夹、修改config.js配置、编写index.jsp页面、实现图片和视频上传的Java代码处理，以及设置web.xml和展示输入内容的process.jsp页面。通过这些步骤，可以实现CKeditor的功能并展示编辑内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构如下：

准备工作：http://ckeditor.com/download下载ckeditor(本例中使用的是3.2版本),下载完后，解压拷贝到WebContent目录下，导入smartupload.jar包，用于处理图片和视频的上传。创建upload文件夹用于存放图片和上传的视频。

①修改ckeditor目录下的config.js文件

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.language='zh-cn';//配置语言
	config.uiColor='#FFF';//背景颜色
	config.width="auto";//宽度
	config.height='300px';//高度
	config.skin='office2003';
	config.toolbar='Full';//工具栏风格Full,Basic
	config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+config.font_names;//将中文字体添加到字体列表
};

②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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在线编辑器CKeditor的应用</title>
</head>
<script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script>

<body>
<h2>在线编辑器CKeditor的应用</h2>
<form action="CKeditorContextSave" method="post" onsubmit="return checkEditor()">
<textarea name="editor2" id="editor2" rows="10" cols="80"></textarea>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
<!-- 注意此处javascript代码要在后面，不然会找不到editor2 -->
<script type="text/javascript">
	CKEDITOR.replace('editor2',{
		filebrowserImageUploadUrl:'<%=basePath%>fileUpload?type=image',
		filebrowserFlashUploadUrl:'<%=basePath%>fileUpload?type=flash'
	});
	function checkEditor(){
		var editor_data = CKEDITOR.instances.editor2.getData();
		if(editor_data == ""){
			alert("编辑器内容不能为空，请输入具体内容后提交");
			return false;
		}else
			return true;
	}
</script>
</html>

③CKeditorFileUpload.java代码如下：（处理图片和视频的上传）

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.lxh.smart.SmartUpload;

public class CKeditorFileUpload extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html");
		PrintWriter out = resp.getWriter();
		resp.setCharacterEncoding("utf-8");
		req.setCharacterEncoding("utf-8");
		StringBuffer sb = new StringBuffer();
		sb.append("<script type=\"text/javascript\">\n");
		String type=req.getParameter("type");
		String allowList = "rar,zip";
		String errMsg = "对不起，文件上传失败！";
		if(type.equalsIgnoreCase("image")){
			allowList = "gif,jpg,png,bmp,tif";
		}else if(type.equalsIgnoreCase("video")){
			allowList = "flv";
		}else if(type.equalsIgnoreCase("flash")){
			allowList = "swf";
		}
		String basePath = getServletContext().getRealPath("/upload").replaceAll("\\\\", "/");
		
		try {
			ServletConfig config = getServletConfig();
			SmartUpload mySmartUpload = new SmartUpload();
			mySmartUpload.initialize(config,req,resp);
			mySmartUpload.setAllowedFilesList(allowList);
			mySmartUpload.upload();
			//实现文件上传
			if(mySmartUpload.getFiles().getFile(0).getFileName().trim().length()>0){
				System.out.println(new String(mySmartUpload.getFiles().getFile(0).getFileName().getBytes(),"utf-8"));
				String fileName = String.valueOf(System.currentTimeMillis())+"."+mySmartUpload.getFiles().getFile(0).getFileExt();
				mySmartUpload.getFiles().getFile(0).saveAs(basePath+"/"+fileName);
				//上传成功后返回文件的引用地址
				sb.append("window.parent.CKEDITOR.tools.callFunction(1,'"+req.getContextPath()+"/upload/"+fileName+"');\n");
			}else{
				//为选择上传文件时提示错误信息
				errMsg = "对不起，文件不能为空，请选择文件后上传！";
				errMsg = new String(errMsg.getBytes(),"utf-8");
				sb.append("window.parent.CKEDITOR.tools.callFunction(1,'"+errMsg+"');\n");
			}
		} catch (Exception e) {
			e.printStackTrace();
			errMsg = new String(errMsg.getBytes(),"iso8859-1");
			sb.append("window.parent.CKEDITOR.tools.callFunction(1,'"+errMsg+"');\n");
		}
		sb.append("</script>\n");
		out.println(sb.toString());
		out.flush();
		out.close();
	}
}

④CKeditorContextSave.java代码如下：（将输入的内容保存后显示，此处实例没保存直接显示）

package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CKeditorContextSave extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException ,IOException {
		req.setCharacterEncoding("utf-8");
		String context = req.getParameter("editor2");
		System.out.println(context);
		req.setAttribute("context", context);
		req.getRequestDispatcher("process.jsp").forward(req, resp);
	};
}

⑤web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  
  <servlet>
  	<servlet-name>CKeditorFileUpload</servlet-name>
  	<servlet-class>com.servlet.CKeditorFileUpload</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>CKeditorFileUpload</servlet-name>
  	<url-pattern>/fileUpload</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>CKeditorContextSave</servlet-name>
  	<servlet-class>com.servlet.CKeditorContextSave</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>CKeditorContextSave</servlet-name>
  	<url-pattern>/CKeditorContextSave</url-pattern>
  </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>/index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

⑥process.jsp代码如下:(仅用于显示输入的内容)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	String context = (String)request.getAttribute("context");
	out.println(context);
%>
</body>
</html>

⑦效果如下：

点击提交后：