在线编辑器CKeditor的应用

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

moneyZhong

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

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/moneyzhong/article/details/8775335

版权

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

摘要由CSDN通过智能技术生成

项目结构如下：

准备工作：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"&