内容


经典的 Web 编辑器——CKEditor 介绍

Comments

CKEditor 简介

CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。利用它,我们可以在 Web 上实现类似于 Microsoft Word 的许多强大的功能。CKEditor 完全是基于 JavaScript 开发的,因此不必在客户端进行任何安装,并且兼容各大主流浏览器,比如:IE,Firefox,Chrome,Safari,Opera。而且由于它是一个纯粹的 JavaScript 应用,所以无论用的是哪种服务器端技术(JSP,PHP,ASP 等等),都可以获得很好的支持。

CKEditor 的前身是 FCKEditor,这个项目是在 2003 年由 Frederico Caldeira Knabben 发起的,FCK 代表的就是项目创建者 Frederico Caldeira Knabben 的简称。从 3.0 版本后,它改名为 CKEditor,CK 代表的含义是 Content And Knowledge(内容与知识)。现在,CKEditor 隶属于 CKSource 公司,背后拥有一个强大的技术团队的支持。在同类产品之中,CKEditor 的使用最为广泛,社区最为活跃,一直拥有良好的口碑。

目前,有很多公司都在使用 CKEditor 作为 Web 编辑的解决方案,比如:IBM,Oracle,Adobe 等等。其中,IBM 已经在其所发布的多款软件中广泛应用了 CKEditor,这些软件包括:Lotus Connections,Lotus Quickr,LotusLive,Lotus Notes,Rational Requirements Management 等等。不仅如此,IBM 也为 CKEditor 的发展,不遗余力地提供了持续性的投入与支持,在 IBM 内部的产品团队中,有专业的开发人员负责 CKEditor 的定制开发,还有专门的技术社区供大家讨论和交流。

竞争优势

刚才我们提到,CKEditor 得到了众多厂商的青睐,被应用到各种商业产品当中。那么 CKEditor 是凭借什么打动了大家呢?

齐全的功能

一个 Web 编辑器需要有哪些功能?撰写,粘贴,颜色,字体,段落,制表,拼写检查,凡是你想得到的,CKEditor 都已经提供在产品当中了。在本文后续章节中,您将得到更详细的介绍。

良好的兼容性

我们可能已经习惯于在我们的代码中,写下类似这样的语句:If isIE then {}。然而,CKEditor 已经为你全部做好,你不用为浏览器的兼容多写一行代码。目前,IE 6 及以上版本,Firefox 2 及以上版本,Safari 3 及以上版本,Opera 9.5 及以上版本,乃至问世不久的 Google Chrome,都在支持的浏览器行列。

丰富的定制性

一款出色的产品,都有着良好的可定制性。CKEditor 在这方面表现得尤为出色。开发者可以根据客户的需求,应用的场景,来配置编辑器的工具栏,更改编辑器的配色,增选必要的插件,并且可以通过 CKEditor 提供的强大的 API 和可扩展性作更多的高级定制。本文接下来的内容将以实例展示 CKEditor 基本的定制功能。

出色的性能

在线编辑,性能是广大用户十分关注的一点。无论是加载速度,还是使用时的响应速度,CKEditor 都有着出色的表现。尤其是最新的 3.x 版本,更是在性能优化方面下足了功夫,用户体验非常出众。

完整的辅助功能支持

很多产品,都对软件的辅助功能支持有着严格的要求。CKEditor 很好的支持了这些功能,为选用他的厂家解决了后顾之忧。这些支持包括且并不限于屏幕阅读器,键盘导航,高对比度等。

优秀的开发团队

CKEditor 本身,就是一个活跃高效的开发社区;伴随着如 IBM 这样的主流软件开发商的选用与支持,CKEditor 在国际化,可编程性,高可用性方面都取得了长足的进展;并且,相信大量商用软件的选用,会给 CKEditor 更好的可持续发展,更光明的未来。

功能特色盘点

作为一个 Web 文本编辑器,除了具备一些常用的基本功能外,CKEditor 还拥有许多独有的特色,接下来我们将对其做一盘点。

丰富的样式选择

在 CKEditor 中,我们不仅可以很方便地对编辑正文使用像粗体、斜体这样的简单样式,还可以使用带有语义规则的复杂样式。这些样式可以预先定义好,使用时只需在样式下拉列表中选取即可。如下图所示,利用预定义样式,我们还能够实现“彩笔”功能,对不同的文本进行着色标示,加以区分。

图 1. 样式选择
图 1. 样式选择
图 1. 样式选择

为了便于导入 Word 文档的内容,CKEditor 还提供了“从 MS Word 粘贴”的功能 ,利用它,在本地 Word 环境里所使用的编辑样式,会被原封不动的保留下来。

超强的编辑功能

除了简单的链接插入外,CKEditor 还支持许多高级特性,比如我们可以选择点击链接后以弹出窗口的方式打开链接,并且我们还能进一步控制弹出窗口的各种属性。

图 2. 编辑链接
图 2. 编辑链接
图 2. 编辑链接

对于 E-mail 类型的链接,我们甚至还可以预先设置好邮件的标题和正文。

图 3. 电子邮件链接
图 3. 电子邮件链接
图 3. 电子邮件链接

友好的用户界面

为了方便文本编辑,尤其是处理大段文本或大尺寸图表的情况,CKEditor 提供了一个“最大化”功能 ,只要点击一下,编辑区域就可以延伸至整个窗口,从而使用户可以在更大空间范围内进行编辑。任何时候,你还可以通过再次点击该按钮,将编辑区域还原。此外,我们还可以拖拽编辑器右下角,根据自己的需要对编辑区域的大小进行任意调整。

如果你想了解当前文本的段落结构,可以选择“显示区块”的功能 。它会以可视化的方式显示出文档的各个段落,以便于你对文档结构进行有效的控制。

图 4. 显示区块
图 4. 显示区块
图 4. 显示区块

对于页锚的插入,CKEditor 同样也采用了可视化的方式。它会在插入页锚的位置放置一个标记 ,这使得我们对页锚的管理变得更加简单和直观。

此外,CKEditor 还提供了“查找和替换”功能,即使是混合样式的文字(比如一半是粗体一半是斜体),也照样能够正确捕获。而在替换方面,CKEditor 还支持文字的批量替换。

丰富的内容支持

除了文本,CKEditor 还支持插入图片、Flash、表格、表单等,以及表情符号和特殊符号等。不仅如此,它还提供了模板功能。使用“插入模板”这一功能,你可以复用预先定义好的 HTML 模板,从而使网站页面布局保持一致的风格。

图 5. 模板
图 5. 模板
图 5. 模板

贴心的可用性设计

CKEditor 的可用性设计遵循了普通桌面应用的惯例,因此用户的使用体验与操作习惯与其他桌面应用非常的接近。它还支持键盘操作,就是在没有鼠标的情况下,用户也可以不受任何限制的加以使用。另外,CKEditor 还提供了上下文菜单,任何时候只要右键点击,CKEditor 便会将与当前使用情景相关的菜单项呈现出来。如果使用过程中出现了误操作,还可以选择“撤销”功能,将当前文本恢复到误操作之前的状态。

CKEditor 也支持拼写检查。不同之处在于,它是目前唯一一款不用任何附加安装就能支持拼写检查的 Web 编辑器。它采用了 SpellCheckr.net 提供的拼写检查服务,因而服务器端无需任何额外的安装。

最后,CKEditor 还兼容像 W3C WCAG 和 US Section 508 这样的国际易用性标准,所以残障用户也可以利用屏幕阅读器来使用它。

定制扩展

作为一款高级的 Web 文本编辑器,CKEditor 提供了一套丰富而强大的 JavaScript API,利用它开发人员可以在运行时与编辑器进行交互,从而对编辑内容进行控制,并在原有编辑器的基础之上扩展出特定于自己应用需求的新功能。

由于 CKEditor 的整体架构是构建在灵活的插件机制之上的,因此我们可以将特定的自定义功能独立于编辑器核心代码之外。实际上,包括许多 CKEditor 已有的预置功能,都是利用插件形式开发出来的。因为不同的插件位于各自的文件中,所以管理和维护都很方便。开发人员也可以根据需要开发属于自己的插件。

此外,为了方便定制工作,CKEditor 还为我们提供了一个详尽的配置文件,利用它我们可以对 CKEditor 的各个方面进行灵活的定制,比如:编辑器的行为,界面风格样式,编辑内容的 HTML 输出,等等。

有了上述这些手段,我们可以很方便的从工具栏,主题风格,对话框,上下文菜单,直至数据解析等,对 CKEditor 实施全方位的随需定制。

新手上路

接下来,我们用一些简单的例子为读者展示 CKEditor 的基本使用。

环境的准备

我们将从 CKEditor 的官方网站下载的开发包解压,与其他必要的 Web 文件如 HTML、CSS,JavaScript 等放在一起。示例代码的文件布局如图 6 所示。

图 6. 文件布局
图 6. 文件布局

在图中,我们将 CKEditor 的全部程序文件放在 js/ckeditor 中。目录 js/ 还存放了其他需要的,包括我们自己编写的 JavaScript。

CKEditor 的基本使用

CKEditor 的使用非常容易。只需要很少的代码就可以在页面中载入一个完整功能的编辑器。使用您喜欢的任何文本编辑器,编辑如下内容,将其存放在与目录 js/ 平级的目录中。

清单 1. 加载编辑器的基本代码
 <html> 
 <head> 
 <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script> 
 </head> 
 <body onload=""> 
 <textarea id="editor1" class="ckeditor">Sample Text</textarea> 
 </body> 
 </html>

在浏览器中的运行效果见图 7。

图 7. 完整的 CKEditor
图 7. 完整的 CKEditor
图 7. 完整的 CKEditor

在上面的代码中,语句 <scripttype="text/javascript"src="js/ckeditor/ckeditor.js"></script>载入完整的 CKEditor 执行代码。

注意在清单 1 的代码中,我们并没有使用任何语句初始化这个编辑器。只是定义了一个 textarea 元素:

 <textarea id="editor1" class="ckeditor">Sample Text</textarea>

缺省地,CKEditor 的执行代码在完整载入后,会在所在页面的 BODY 元素中寻找 CSS class 为 ckeditor 的 <textarea>HTML 元素,将其替换为完整功能的 CKEditor。这一过程中,寻找的 CSS 类名,以及是否进行这样的替换,都是可配置的。关于如何配置,则超出了本文的范围,在此不再赘述。

除了令 CKEditor 自动进行 <textarea> 元素的替换外,我们也可以使用 JavaScript 代码让 CKEditor 替换特定的 <div> 以及 <textarea> 元素。参见代码清单 2。

清单 2. 替换 div 元素
 <html> 
 <head> 
 <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script> 
 <script type="text/javascript"> 
 <!-- 
 functiononLoad() 
 { 
 CKEDITOR.replace("editor2"); 
 } 
 //--> 
 </script> 
 </head> 
 <body onload="returnonLoad(); "> 
 <div id="editor2"><strong>Sample</strong> Text</div> 
 </body> 
 </html>

代码清单 2 中,我们在 BODY 元素的 onload 事件中调用函数 onLoad。在函数中,语句 CKEDITOR.replace("editor2");在 BODY 中寻找 ID 为 editor2 的 <div> 元素或 <textarea> 元素并将其替换为完整功能的 CKEditor。

在通常的 CKEditor 应用中,清单 2 的代码是更加常用的。在 CKEDITOR.replace() 函数中,我们可以传递更多的参数,来定制我们需要的编辑器。作为例子,下一小节我们将演示如何定制 CKEditor 的工具栏。

通过参数定制工具栏

在大多数应用场合中,我们需要更改编辑器的缺省配置,如工具栏布局、大小、样式等。通过在创建编辑器实例时,传入适当的配置参数,这些都可以实现。清单 3 的代码展示了如何通过配置参数定制 CKEditor 的工具栏。

清单 3. 定制工具栏
 <html> 
 <head> 
 <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script> 
 <script type="text/javascript"> 
 <!-- 
 functiononLoad() { 
 CKEDITOR.replace("editor2", { 
 toolbar: [ 
 ['Bold','Italic','Underline','Strike'], ['Cut','Copy','Paste'], 
 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] 
 ] 
 }); 
 } 
 // --> 
 </script> 
 </head> 
 <body onload="returnonLoad();"> 
 <div id="editor2">Sample text</textarea> 
 </body> 
 </html>

创建的编辑器实例参见图 8。

图 8. 定制工具栏后的编辑器实例
图 8. 定制工具栏后的编辑器实例
图 8. 定制工具栏后的编辑器实例

可以看到,我们裁剪了缺省的工具栏配置,提供了精简的编辑功能。我们在调用 CKEDITOR.replace() 函数时用到了 toolbar 这一配置参数,只需列举代表相应功能的一组名字,即可定制出我们所需要的菜单栏。

CKEditor 缺省的菜单栏配置可以参见其官网上的文档:http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

输入和输出

在最后一个例子中,我们将演示如何为 CKEditor 提供待编辑的文档,以及如何获得用户编辑完成的文档。

在上面的示例中,我们已经看到,为 CKEditor 提供待编辑的文档非常简单。我们只需要把文档的 HTML 代码放进 <textarea> 或者 <div> 元素即可。HTML 代码中的格式也会自动为 CKEditor 所识别。参见代码清单 4 以及图 9:

清单 4 div 元素中包含 HTML 代码
 <html> 
 <head> 
 <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script> 
 <script type="text/javascript"> 
 <!-- 
 functiononLoad() { 
 CKEDITOR.replace("editor2"); 
 } 
 // --> 
 </script> 
 </head> 
 <body onload="returnonLoad();"> 
 <div id="editor2"><em>Sample</em> text</textarea> 
 </body> 
 </html>
图 9 带有格式的待编辑文档
图 9 带有格式的待编辑文档
图 9 带有格式的待编辑文档

为获取用户在 CKEditor 中编辑的文档,最方便做法的是使用传统的表单提交方式。在清单 5 的代码中,我们创建了一个 JSP 页面。在页面中,我们通过替换 HTML 表单中的 <textarea> 元素来创建一个编辑器实例,并将表单提交给本页面。在页面头部的 Java 代码中,我们尝试获取客户端提交的编辑文档数据,输出到命令行中并作为本次编辑器的待编辑数据。

清单 5 利用表单提交用户编辑的文档
 <%@ page buffer="none" autoFlush="true" contentType="text/html; charset=utf-8" 
 %><% 
 String text = request.getParameter("text"); 
 if (text == null) { 
 text = "<em>Sample</em> text"; 
 } 
 System.out.println(text); 
 %><html> 
 <head> 
 <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script> 
 <script type="text/javascript"> 
 <!-- 
 function onLoad() { 
 CKEDITOR.replace("editor2"); 
 } 
 // --> 
 </script> 
 </head> 
 <body onload="return onLoad();"> 
 <form method="post" action="sample.jsp"> 
 <textarea id="editor2" name="text"><%=text %></textarea> 
 <br /> 
 <input type="submit" value="Submit" /> 
 </form> 
 </body> 
 </html>

代码运行的结果如图 10 所示。其中,我们将单词 styles 设置了加粗、斜体和下划线。

图 10. 获取提交的数据
图 10. 获取提交的数据
图 10. 获取提交的数据

编辑一部分文字后,点击 Submit,我们可以从应用服务器的命令行输出中看到 CKEditor 提交的,经过格式化的 HTML 代码,参见清单 6。

清单 . 6 经格式化的 HTML 代码
 <p> 
 <em>Sample</em> text</p> 
 <p> 
 Now I input another line, with fancy <u><strong><em>styles</em></strong> 
 </u>.</p> 

 <p> 
 <em>Sample</em> text</p> 
 <p> 
 Now I input another line, with fancy <u><strong><em>styles</em></strong> 
 </u>.</p>

可以看到,CKEditor 的输出数据是符合 HTML 规范的。

小结

CKEditor 是一款出众的开源 Web 文本编辑器,它因为齐全的功能,良好的兼容性,丰富的定制能力,出色的性能表现,以及完整的辅助功能支持,受到了业界厂商的广泛青睐和大力支持。更为重要的是,通过示例我们可以看到,CKEditor 上手简单,易于掌握,寥寥数行代码即可将一个功能复杂的专业编辑器展现无余。看到这里你是否有些怦然心动了呢,那就即刻访问 CKEditor 的官方网站去下载并体验一下吧。


相关主题

  • 阅读 CKEditor 开发人员手册,这是涉及 CKEditor 开发的最权威也是最新的官方文档。其中包含了如何配置和定制 CKEditor,以及完整而详细的 JavaScript API 文档。
  • 阅读 CKSo 官方博客,在这里不仅能够获取到有关 CKEditor 发布信息的最新动向,同时也可以了解 CKSource 的其他产品相关信息,如 CKFinder。
  • 观看 CKEditor 演示,这里提供了一个 CKEditor 的在线演示环境。在这里,你可以获得 CKEditor 的最新使用体验。除了基本的编辑特性外,演示环境还提供了诸如换肤,工具栏定制,多语言支持等许多高级特性。
  • 下载 CKEditor 最新版本,在这里你可以下载到最新版本的 CKEditor。

  • developerWorks Web development 专区:通过专门关于 Web 技术的文章和教程,扩展您在网站开发方面的技能。
  • developerWorks Ajax 资源中心:这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
  • developerWorks Web 2.0 资源中心,这是有关 Web 2.0 相关信息的一站式中心,包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门栏目,迅速了解 Web 2.0 的相关概念。

评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=601649
ArticleTitle=经典的 Web 编辑器——CKEditor 介绍
publish-date=12162010