CKEditor3.x的介绍和使用

张玉龙
浏览: 744937 次
性别:
来自: 沈阳
最近访客更多访客>>

bjcms
繁星水
flyfoxs
sunzeping
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

CKEditor onblur 事件
  CKEDITOR.instances.YOUR_TEXTAREA_ID.on('blur', function() {  
              alert('onblur 123');  
                });






一、简介

　　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>



1、创建一个editor实例：
先把jquery和ckeditor的js文件包含进来（jquery.js已经在我们下载的ckeditor文件夹中了）：
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
然后我们可以在任何<textarea>、<p>、<div>元素都能被转换成在线编辑器，仅需要其对象的ckeditor()方法：
$( 'textarea.editor' ).ckeditor();
obj.ckeditor([callback[,options]])，ckeditor()包含两个参数，第一个是当editor编辑器执行完成时的回调函数，第二个参数是作为

 

所创建编辑器实例的配置，
$('.jquery_ckeditor').ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );
在每一个回调函数中的$(this)是指代当前的CKEditor编辑器对象。
一旦编辑器实例被创建（即回调函数被调用的时候），可以利用ckeditorGet()来获取一个CKEditor的编辑器对象,同样我们也可以通过

val()方法来获取指定CKEditor中的值：
//获取ckeditor对象
var editor = $('textarea.editor').ckeditorGet();
alert( editor.checkDirty() );
由于获取和设置编辑器的值是很普遍的操作，所有ckeditor编辑器提供了val()操作：
//获取编辑器对象中的值
var data = $( 'textarea.editor' ).val();
//设置编辑器中的值
$( 'textarea.editor' ).val( 'my new content' );
这个方法能通过在加载Jquery Adapter之前，设置CKEDITOR.config.jqueryOverrideVal为false来禁止
对于textarea，当表单提交时候，编辑器editor将自动的返回它的内容。


五、CKEditor的配置文件
1、简介：
    我们可以通过CKEditor的配置文件来使它适应我们的应用，主要的配置文件就是config.js，可以在我们下载的文件夹中找到！

2、可用的配置：
    所有可用的配置都可以在文档http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html中找到

3、在页面中定义配置：
    最后的方法是在我们创建我们的编辑器实例的时候来设置它的基本配置！这样可以避免接触源文件，也方便以后的升级。
    在页面中我们可以通过CKEDITOR.replace和CKEDITOR.appendTo来设置：
CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

4、使用config.js文件
我们同样可以同过CKEditor中的congfig.js文件来进行配置，在config.js文件中，这个文件下下来其中就是一个空函数，我们可以对其

进行编辑：
CKEDITOR.editorConfig = function( config ){
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};
我们也可以用我们自己的配置：
CKEDITOR.replace( 'editor1',{
    customConfig : '/custom/ckeditor_config.js'
});
其中的js文件必须要和默认配置文件中的设置一样！

5、配置覆盖规则：
a.当edtitor实例被创建之后，在这一配置都都设置；
b.如果用户在页面中设置好了editor的配置，优先加载页面中的配置，再加载外联配置文件中的配置

6、避免加载扩展的设置文件：
CKEDITOR.replace( 'editor1', {
        customConfig : ''
});


六、CKEditor的Toolbar设置：
1、简介：由于针对不同的用户需求，不是所有的属性都需要，所有我们可以定制化我们的Toolbar!

2、工具栏的定义其实就是一个js数组，包含了所有的可显示的东西，我们有两种方法来配置我们的工具栏：一种是直接设置到默认的工

具栏数组中，还有一种就是定制我们自己的工具栏，其格式要是toolbar_<name>，然后这个name就可以被我们通过toolbar设置在页面中

了。（其中的'-'代表分割符！'[]'代表一组设置！'/'代表的换行，即让几个块工具栏在同一行中！）
默认的：
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

3、自定义我们的工具栏：
一个简单的方法就是通过config.js文件，直接加入我们的配置，或者更好的就是另外建立一个我们的自定义的配置文件，然后把它加载

进来：
CKEDITOR.editorConfig = function( config )
{
    config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
    [
        ['NewPage','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];
};
然后，你可以根据你的用户需求给予他们不同的工具栏：
CKEDITOR.replace( 'editor1',
    {
        toolbar : 'MyToolbar'
    });

CKEDITOR.replace( 'editor2',
    {
        toolbar : 'Basic'
    });
另一个方法就是直接在我们的页面中设置，即toolbar设置项：
CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });
分享到：