CKEditor即大名鼎鼎的FCKeditor(文本编辑器),它终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CKSource(波兰华沙的公司)的名字有关吧,该公司的另一个产品为CKFinder(一个Ajax文件管理器),这次可能为了保持一致,将FCK更改为CK,但是版本号继承了下来,为CKeditor3.0版。
安装
安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成。
1.从CKEditor官方网站上下载CKEditor的最新版本。
2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。
注意:你也可以将这些文件放在你网站的任何一个地方,默认为“ckeditor”。测试你的安装 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看“_samples”目录。访问如下的地址进行测试:
http://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html
例如:http://www.您的网站.com/ckeditor/_samples/index.html
集成
有若干个方式能将CKEditor集成到你的网页中,在这里介绍最常用的实现方法。
第一步:载入CKEditor
CKEditor 是一个JavaScript 应用程序,你只需要在你的网页中包含一个文件引用就能加载它。
如果你已经将CKEditor安装在了你网站的“ckeditor”目录,你可参照如下示例:
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
用以上方式加载,CKEditor JavaScript API 就准备就绪,可以使用了。
第二步:创建一个编辑器实例
CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码。
但是,实际上,CKEditor仍然是使用一个文本区域来传递它的数据到服务器上,这个文本区域对使用者来说是不可见的。所以,你必需创建并编辑一个实例,首先创建一个实例:
<textarea id="editor1"></textarea>
注意,如果你想要加载一些数据到编辑器中,例如从数据库中读出数据,只需要把数据放在文本区域(textarea)内就可以了,就像上面的例子一样。
在这个例子中,我们已经将文本区域(textarea)命名这“editor1”。当接收POST提交的数据时,这个名字将被用在服务器操作。
开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换(replace)”这个普通的文本区域(textarea),为此,必须加入如下一段JavaScript代码:
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程,但是在这种情况下,你必须确定DOM已经载入完毕,通常可以写在window.onload事件里面(这时DOM肯定已经载入完毕啦):
<script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); }; </script>
第三步:保存编辑器内容数据
按照先前的描述,编辑器正如一个文本区域(textarea)一样工作,所以,当提交一个包含一个编辑器实例的表单时,他的数据也将是很简单的传递,用文本区域(textarea)的名称作为健名来接收数据。举个例子,按照上面的例子,在PHP中我们需要像这样来处理数据:
<?php $editor_data = $_POST[ 'editor1' ]; ?>
客户端数据处理 一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如:
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
完整例子
<html> <head> <title>Sample - CKEditor</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br /> <textarea name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </p> <p><input type="submit" /></p> </form> </body> </html>
完结撒花
全民百科词条内容由用户共同创建和维护,不代表全民百科立场。如果您需要医学、法律、投资理财等专业领域的建议,我们强烈建议您独自对内容的可信性进行评估,并咨询相关专业人士。