CKEditor的JQuery适配器用法

admin 发表于 [Javascript] 分类,标签: jQuery ckeditor
0

 

 JQuery适配器

 

         CKEditor通过自身的JQuery适配器实现JQuery的集成。通过其本身的特点实现与JQuery的深度集成。

 

创建编辑器实例

 

         为创建编辑器实例,你需要将以下两个文件添加至你的页面中。

 

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

 

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

 

         通过加载上面两个文件,你可以在页面上使用ckeditor()方法得到编辑器实例。

 

$(‘textarea.editor’).ckeditor();

 

         当然你也可以使用JQuery链,如下:

 

$( '.section-x' )

    .find( 'textarea.editor' )

        .ckeditor()

    .end()

    .find( 'a' )

        .addClass( 'mylink' )

.end();

Ckeditor()方法是JQuery适配器的主方法,它接收两个可选参数:

  •  编辑器准备完成的回调函数
  • 创建编辑器实例的特定配置选项。

配置选项是一个包含属性的简单对象,每一个关联到的一个特定的编辑器设置。

$('.jquery_ckeditor')

    .ckeditor( function() { /* callback code */ }, { skin : 'office2003' } )

    .ckeditor( callback2 );

以上代码并不会创建两个编辑器实例,实际上只会创建一个包含两个回调函数的编辑器实例,每一个回调函数都会被作为CKEDITOR.editor对象和DOM元素对象的参数被执行。

编辑器实例代码交互

         当一个编辑器实例创建成功后,ckeditorGet()方法可以用来检索代表一个编辑器实例的CKEDITOR.editor对象。如下例:

 

        var editor = $('.jquery_ckeditor').ckeditorGet();

         alert( editor.checkDirty() );

由于设置和接收编辑器对象是常用操作,CKEditor的jquery适配器也提供一个专用val()方法做为Jquery Val()方法的扩展。这个方法完全可以像JQuery各个版本那样工作,但其增加了对设置和得到编辑器内容的功能。

 

// 得到编辑器内容

var data = $( 'textarea.editor' ).val();

// 设置编辑器内容

$( 'textarea.editor' ).val( '杰之蓝设置编辑器信息' );

这个特性在加载适配器之前设置CKEDITOR.config.jqueryOverrideVal=false时不可用。

 

编辑器在表单提交的时候会自动的请数据返回给<textarea>元素。CKEditor也可以同jquery表单插件共同工作。不需要从开发端提供任何支持。

 

事件绑定

 

         虽然CKEditor使用自身的事件机制,但仍然为JQuery事件机制暴露了四个主事件。所有事件都使用.ckeditor命名空间。

 

事件列表:

 

  •  instanceReady.ckeditor:在编辑器被创建后被触发,但在任何回调函数通过ckeditor()方法之前。
  • setData.ckeditor :当编辑器被设置值时触发
  • getData.ckeditor:当编辑器得到值时触发
  • destroy.ckeditor :当编辑器销毁时触发,可以用在清除页面数据时使用。

发表我的评论