FCKEditor是一款优秀的富文本编辑器,在Web开发中用作文本编辑插件,非常好用,现在已经升级为CKEditor3,界面更加炫酷,功能更加丰富。
之前在FCK中使用过文件上传功能(普通文件,图片,FLASH),而在CK中,官方使用另外一套组件CKFinder进行上传,CKFinder也是富客户端界面,效果不错,但是官方示例中没有对Java进行支持(PHP,ASP/ASP.NET都有)。改造CKFinder比较麻烦了,把PHP/.NET的改成Java的几乎不现实,还是等官网出java版本再使用吧。不过要是用CKEditor的上传功能没有关系,既然提供了上传接口,那么实现手段我们自己实现就是了,下面从CKEditor的安装开始介绍。
要使用CKEditor,首先要下载开发包,官网http://ckeditor.com/ 提供最新版下载,下载后包含源码和例子,当然正式运行中并不需要这些东西。我们可以提取如下内容:
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>
提交这个页面到display.jsp,我们就能看到下面的效果了,非常不错。
至此,CKEditor的安装和测试全部结束,我们已经得到想要的结果了,在系统设计时要考虑使用编辑器的数据库字段大小,要足够大。如果是发布系统那就使用freemarker模板生成静态文件保存吧。数据库设计还是不要挂太大的存储负载。
下一篇将介绍使用自定义的Servlet实现CKEditor3的上传功能。
欢迎交流,希望对使用者有用。
- 大小: 23.9 KB
- 大小: 27.3 KB
- 大小: 16.1 KB
分享到:
相关推荐
CKEditor3.x是该编辑器的一个版本,具有良好的稳定性和可扩展性。在这个配置使用教程中,我们将重点关注如何使CKEditor3.x支持图片上传,并且这个上传功能将通过FTP协议实现。 首先,让我们了解一下CKEditor的基本...
5. `使用说明.txt`:这是一个文本文件,里面详细介绍了如何安装和配置CKEditor以及CKFinder,是快速上手的关键。 6. `themes`、`skins`、`images`:这些文件夹包含了CKEditor的主题、皮肤和图像资源,可以自定义编辑...
"CKEditor 4 开发人员指南.pdf"这份文档很可能是CKEditor4.2的官方开发指南,内容可能包括安装教程、API参考、插件开发、自定义配置等方面的详细指导。通过阅读这份文档,开发者可以深入理解CKEditor的工作原理,...
3. **引入ckEditor到JSP页面** - 在JSP页面中添加以下代码来引入ckEditor。 ```html <script type="text/javascript" src="ckeditor/ckeditor.js"> ``` 4. **初始化ckEditor实例** - 使用`CKEDITOR.replace()`...
为了使用这个编辑器,你需要下载并安装CKEditor,然后将"formula"压缩包中的文件解压并导入到CKEditor的插件目录中。配置完成后,编辑器将会在CKEditor的工具栏上显示一个新按钮,点击即可启动数学公式编辑功能。 ...
在“富文本编辑器ckeditor使用手册”中,你将找到关于如何安装、配置、使用以及自定义CKEditor的各种指导。以下是一些关键知识点的详细说明: 1. **安装CKEditor**:首先,你需要从CKEditor的官方网站下载编辑器的...
通过本文介绍的知识点,开发者可以快速掌握如何安装、升级以及使用CKEditor的基本方法。无论是对于初次使用者还是希望进一步定制编辑器功能的高级用户来说,这些知识点都提供了必要的指导和支持。
通过阅读"使用说明.doc"文档,你可以系统地了解CKEditor的安装、配置和使用方法,从而有效地在项目中应用这一强大的富文本编辑工具。同时,通过实际操作和练习,你将能够熟练掌握CKEditor的使用技巧,提升网页内容...
CKEditor 4.0 是一个广泛使用的开源富文本编辑器,为网页内容创建提供了强大的工具。这款编辑器以其灵活性、可扩展性和丰富的功能集而受到开发者的青睐。"lineheight"插件是专门为CKEditor 4.0设计的一个重要组件,...
在这个"ckeditor5富文本框使用demo.zip"压缩包中,我们可以找到一个关于如何在前端项目中集成和使用CKEditor 5的示例。 首先,让我们深入理解CKEditor 5的核心特性: 1. **富文本编辑**:CKEditor 5支持各种文本...
### CKEditor安装与配置详解 #### 一、CKEditor简介 CKEditor,原名FCKeditor,是一款功能强大的在线富文本编辑器。随着版本的更新和技术的发展,它被重命名为CKEditor,以更好地体现其所属的公司CKSource的品牌...
- 示例和文档,帮助开发者快速理解和使用CKEditor 通过这个全功能的压缩包,开发者可以在项目中灵活地配置和定制CKEditor,打造一个功能强大的在线文本编辑平台。无论是简单的文本编辑,还是复杂的多媒体内容管理,...
"配置方法存放在docs文件夹下"这一信息提示,开发者可以在docs文件夹内找到关于如何设置和定制CKEditor的详细指南,包括但不限于语言设置、工具栏配置、插件安装等。 "源码是一个示例,欢迎感兴趣的用户下载学习...
1. **多语言支持**:ckeditor3支持多种语言,包括中文和英文,满足全球用户的使用需求。在`ckeditor3_ch.zip`中,我们可以找到针对中文用户的本地化版本。 2. **可定制性**:ckeditor3允许开发者根据项目需求自定义...
3. 配置CKEditor的图片上传:在CKEditor的配置文件(config.js)中,设置filebrowserBrowseUrl和filebrowserUploadUrl指向CKFinder的相应接口。 4. 开启粘贴图片功能:CKEditor支持从剪贴板直接粘贴图片,需要在配置...
由于 Vue3 使用了响应式系统,我们可以直接在 CKEditor 中使用 `v-model` 与 Vue3 实例的数据进行双向绑定。在 CKEditor 组件中,`v-model` 绑定的 `content` 将实时反映编辑器中的文本内容。 ### 6. Webpack 配置 ...
1. **安装与集成**:首先,你需要将行间距插件下载并添加到CKEditor的配置中。这通常涉及到将`lineheight`文件夹放入CKEditor的plugins目录下,并在配置文件中声明这个插件,例如:`config.extraPlugins = '...
9. **兼容性**:Vue-ckeditor适用于Vue.js 2.x版本,对于Vue.js 3.x,可能需要查找适配的版本或使用其他解决方案,因为Vue的API在不同版本间有所变化。 10. **扩展功能**:Ckeditor支持许多插件,如图片上传、表格...
这个文件通常位于CKEditor的安装目录下,负责接收来自编辑器的上传请求,处理文件上传并返回相应的结果信息。 1. **PHP上传配置**:首先,你需要确保服务器环境支持PHP文件上传。在`upload.php`中,你需要配置相关...
1. 下载并安装CKEditor和CKFinder:首先,从官方网站下载这两个组件的最新版本,然后按照官方文档的指示进行安装。 2. 集成CKFinder:在ASP.NET项目中配置CKFinder,设置服务器路径、访问权限等参数,确保CKFinder...