注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

God is U 做自己的上帝

富原孤島--只发优质级的文章

 
 
 

日志

 
 

CKEditor安装与配置(PHP)FCKEditor  

2010-04-07 10:47:22|  分类: [IT技术] |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  CKEditor即大名鼎鼎的FCKeditor终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CKSource的名字有关吧,该公司的另一个产品为CKFinder(一个Ajax文件管理器),这次可能为了保持一致,将FCK更改为CK,但是版本号继承了下来,为CKeditor3.0版。

FCKeditor项目已转向下一代版本命名CKEditor的产品开发,基本上采用Fckeditor并对部分进行了重新设计和采用新技术以改善结构。最新版本是ckeditor 3.0 beta 2,这是一个全功能的测试版,它包含了我们按预期准备发布的第一个ckeditor 3.0正式版的所有功能。你现在就可以享受它令人吃惊的性能、充分无障碍和强大而可扩展的javascript API,有着你过去常常使用的fckeditor的大部分功能。

好了言归正传,我们看看CKEditor在PHP中如何安装和配置,非常简单。

  • 安装
  • 安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成。
    1.从我们的网站http://ckeditor.com.cn上下载CKEditor的最新版本。CKEditor 3.0.1, released on 16 October 2009。
    2.将下载的文件解压,然后将4M多的文件减肥:可以删掉_samples、_source、_tests这三个无用的文件夹;打开lang文件夹,干掉除_languages.js、en.js、zh-cn.js以外的所有文件;如果你不用office2003和v2两种皮肤,可以把skin目录下的这两个目录也都干掉。这样下来就1M都不到了。
    3.将整理好的下载文件上传到你网站根目录下的“ckeditor”文件夹里。
    注意:你也可以将这些文件放在你网站的其他任何一个地方,默认为“ckeditor”。
  • 测试你的安装
  • 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看“_samples”目录。访问如下的地址进行测试:
  • http://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html
    例如:
    http://www.example.com/ckeditor/_samples/index.html
  • 集成 (即CKEditor的安装配置)
  • 有苦干个方式能将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 name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
  • 注意,如果你想要加载一些数据到编辑器中,例如从数据库中读出数据,只需要把数据放在文本区域(textarea)内就可以了,就像上面的例子一样。在这个例子中,我们已经将文本区域(textarea)命名这“editor1”.当接收POST提交的数据时,这个名字将被用在服务器操作。现在,开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换(replace)”这个普通的文本区域(textarea),为此一段JavaScript命令是必须的:
  • <script type="text/javascript">
    CKEDITOR.replace( ’editor1’ );
    </script>
  • 上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程,但是在这种情况下你需要对“window.onload”事件进行监听:
  • <script type="text/javascript">
    window.onload = function()
    {
    CKEDITOR.replace( ’editor1’ );
    };
    </script>
  • 第三步:PHP保存编辑器内容数据
  • 按照先前的描述,编辑器正如一个文本区域(textarea)一样工作,所以,当提交一个包含一个编辑器实例的表单时,他的数据也将是很简单的传递,用文本区域(textarea)的名称作为健名来接收数据。举个例子,按照上面的例子,在PHP中我们需要像这样来处理数据:
  • <?php
    $editor_data = $_POST[ ’editor1’ ];
    ?>
  • 客户端数据处理
  • 一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如:
  • <script type="text/javascript">
    var editor_data = CKEDITOR.instances.editor1.getData();
    </script>
  • CKEditor安装配置完整例子
  • <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">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
    <script type="text/javascript">
    CKEDITOR.replace( ’editor1’ );
    </script>
    </p>
    <p>
    <input type="submit" />
    </p>
    </form>
    </body>
    </html>

    这里主要介绍了CKEditor安装与配置的基础的步骤(在PHP中),让我们初步体验了FCKEditor在线编辑器的下一代的优良表现。因为时间太晚了,过几天我们将一起去看看如何个性化CKEditor界面、如何开启配置CKEditor的图片上传功能等等更深入的CKEditor开发人员指南。

    最后我们看看CKEditor的效果演示:http://ckeditor.com/demo

     

    博主其它精彩博文:

  • 中国别再去当救世主   2011-08-09 10:30:33
    三大运营商尚未获得手机支付牌照   2011-08-09 10:27:37
    上海扩建国际出口带宽至300G   2011-08-08 22:35:01
    罗杰斯:坚决不买美国股票   2011-08-08 22:00:55
    美国股市发展史的启示   2011-08-08 21:53:33
    经济岌岌可危,中国能否再救世界   2011-08-08 21:48:50
    A股暴跌真相,迎三年调整?   2011-08-08 21:20:50
    揭秘Google+技术架构   2011-08-08 14:49:14
    令人羡慕的中国低价漫游费   2011-08-08 14:38:21
    喜欢用IE的人比较笨?   2011-08-08 14:35:40

     
  •   评论这张
     
    阅读(3282)| 评论(1)
    推荐 转载

    历史上的今天

    在LOFTER的更多文章

    评论

    <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    页脚

    网易公司版权所有 ©1997-2017