CKEditor3.x的介绍和使用（一）

Posted on 2010-07-29 15:20 Terry_glp 阅读(1726) 评论(0) 收藏举报

一、简介

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

二、官方手册

　　官方手册地址：http://docs.cksource.com/CKEditor_3.x/Developers_Guide

三、基本的使用

　　1、先下载（下载地址：http://ckeditor.com/）、解压将其中的ckeditor文件夹放到你的网站根目录下，或者是你指定的项目中都可以，可以浏览_sample文件夹中的内容查看ckeditor的demo。

　　2、将ckeditor加载到你的页面中：

　　　　由于CKEditor是一个Javascript的应用，所有我们加载它仅需要在页面中将它引用进来：

<head>
    ...
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

这样ckeditor就可以被我们使用了！

　　3、创建一个CKEditor的实例：

　　　　　CKEditor借用textarea来传输他的数据到服务器，但是这个textarea对用户是透明的，我们可以这样使用：

<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

现在我们在利用EKEditor的Api来"替换"textarea成一个CKEditor实例：

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>

注意，这段js代码必须要在textarea html代码段加载之后执行，所有我们可以将这段直接放到<textarea>之后：

<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>

或者是当页面加载完成时候执行它：

<head>
..
<script type="text/javascript">
    window.onload = function(){
        CKEDITOR.replace( 'editor1' );
    };
</script>
</head>
<html>
..
<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
</html>

　　4、服务器端接收CKEditor传过来的数据：

　　同我们之前讲的一样，Ckeditor就类似于一个textarea，所我们可以在服务器端这样接收客户端POST过来的数据：

<?php
　　$editor_data = $_POST[ 'editor1' ];
?>

有时候，一些应用（像Ajax）需要在客户端出来ckeditor的数据，我们可以使用ckeitor的api很容易的这样做到：

<script type="text/javascript">
    var editor_data = CKEDITOR.instances.editor1.getData();
</script>

5、最后放一个完整的例子：

<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>

刷新页面返回顶部

Class Myself Extends Phper{ }

CKEditor3.x的介绍和使用（一）