CKEditor 3安装和使用

最新推荐文章于 2015-05-25 20:50:40 发布

nanlei1987

最新推荐文章于 2015-05-25 20:50:40 发布

阅读量256

点赞数

分类专栏：开发技巧文章标签： fckeditor ASP.net ASP Flash PHP

本文链接：https://blog.csdn.net/nanlei1987/article/details/83557017

版权

开发技巧专栏收录该内容

11 篇文章 0 订阅

订阅专栏

FCKEditor是一款优秀的富文本编辑器，在Web开发中用作文本编辑插件，非常好用，现在已经升级为CKEditor3，界面更加炫酷，功能更加丰富。
之前在FCK中使用过文件上传功能(普通文件，图片，FLASH)，而在CK中，官方使用另外一套组件CKFinder进行上传，CKFinder也是富客户端界面，效果不错，但是官方示例中没有对Java进行支持(PHP,ASP/ASP.NET都有)。改造CKFinder比较麻烦了，把PHP/.NET的改成Java的几乎不现实，还是等官网出java版本再使用吧。不过要是用CKEditor的上传功能没有关系，既然提供了上传接口，那么实现手段我们自己实现就是了，下面从CKEditor的安装开始介绍。
要使用CKEditor，首先要下载开发包，官网http://ckeditor.com/ 提供最新版下载，下载后包含源码和例子，当然正式运行中并不需要这些东西。我们可以提取如下内容：
[img]http://dl.iteye.com/upload/attachment/206748/318410aa-37a7-339b-87ac-cf04eae0f74d.jpg[/img]
ckeditor/lang下是语言支持包，这里可以精简，一般保留zh-cn和en就够了，目录放好后，就是配置和写页面了，也很简单。文件上传我们使用servlet进行，比较简单，只需要apache commons组件中的fileupload和io即可完成。
和FCKEditor不同的是，CKEditor的配置需要使用config.js。那我们先来配置config.js。

CKEDITOR.editorConfig = function(config) {
	config.language = 'zh-cn'; // 配置语言
	config.uiColor = '#FFF'; // 背景颜色
	config.width = 'auto'; // 宽度
	config.height = '300px'; // 高度
	config.skin = 'office2003';//界面v2,kama,office2003
	config.toolbar = 'Full';// 工具栏风格Full,Basic
};

一般配置这些参数就够了，其他的详细配置可以参考文档了，值得说的是skin选项，有3中，v2就是还原到FCKEditor的风格，kama和office2003是新风格，我使用了office2003风格，官网的样式是kama。配置了skin后就不用配置uiColor了。下面看页面配置:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/ckeditor/ckeditor/ckeditor.js"></script>
<style type="text/css">
* {
	font-family: "宋体";
	font-size: 14px
}
</style>
<title>CKEditor</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="/ckeditor/display.jsp">
<table width="650" height="400" border="0" align="center">
	<tr>
		<td valign="top">内容:</td>
		<td><textarea cols="80" id="content" name="content">
      </textarea> <script type="text/javascript">
      	CKEDITOR.replace('content');
</script></td>
	</tr>
	<tr>
		<td></td>
		<td><input type="submit" name="Submit" value="提交" /> <input
			type="reset" name="Reset" value="重置" /></td>
	</tr>
</table>
</form>
</body>
</html>

引入js文件，注意相对路径不能错了，我这里工程名和文件夹同名，肯定出现两次。在HTML页面中写一个textarea，然后脚本段就完成了。配置非常简单，此时就可以看到CKEditor的效果了。但是打开图片，Flash时是没有上传选项卡的。
首先我们来测试一下CKEditor，写个JSP页面来接收参数即可

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Display Content</title>
</head>
<%request.setCharacterEncoding("UTF-8"); %>
<center>
<table width="600" border="0" bordercolor="000000"
	style="table-layout: fixed;">
	<tr>
		<td width="100" bordercolor="ffffff">主题:</td>
		<td width="500" bordercolor="ffffff">${param.title}</td>
	</tr>
	<tr>
		<td valign="top" bordercolor="ffffff">内容:</td>
		<td valign="top" bordercolor="ffffff">${param.content}</td>
	</tr>
</table>
</center>
</html>

[img]http://dl.iteye.com/upload/attachment/206750/8018bf12-c915-3d86-a09e-5cb225e23be0.jpg[/img]
提交这个页面到display.jsp，我们就能看到下面的效果了，非常不错。
[img]http://dl.iteye.com/upload/attachment/206752/75e9b13d-186e-31a7-be23-af2af516f177.jpg[/img]
至此，CKEditor的安装和测试全部结束，我们已经得到想要的结果了，在系统设计时要考虑使用编辑器的数据库字段大小，要足够大。如果是发布系统那就使用freemarker模板生成静态文件保存吧。数据库设计还是不要挂太大的存储负载。
下一篇将介绍使用自定义的Servlet实现CKEditor3的上传功能。
欢迎交流，希望对使用者有用。

nanlei1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CKEditor 3安装和使用

FCKEditor是一款优秀的富文本编辑器，在Web开发中用作文本编辑插件，非常好用，现在已经升级为CKEditor3，界面更加炫酷，功能更加丰富。之前在FCK中使用过文件上传功能(普通文件，图片，FLASH)，而在CK中，官方使用另外一套组件CKFinder进行上传，CKFinder也是富客户端界面，效果不错，但是官方示例中没有对Java进行支持(PHP,ASP/ASP.NE...
复制链接

扫一扫