CKEditor plugin for jQuery

[Tobiasz Cudnik]

Create a jQuery plugin, which will allow jQuery users easily integrate rich text editing into their applications.

Planned

• All API mockups
  • .ckeditor( func, config )
    Create new editor instance and fire callback when ready. Allowed are all elements, not only textareas.
  • .ckeditorGet()
    Get already existing editor instance.
  • .val()
    val() on textareas returns/sets data on the editor
  • jQuery.ckeditorConfig()
    Change global CKEditor config
• Forwarding some CKEditor events (namespaced)
  • newInstance
  • setData
  • getData
  • destroy
• Submit integration
  • normal submit
  • ajaxSubmit

Below mockup of planned API.

Editor creation

// chainably transform textareas into CKEditor instance
$('textarea').ckeditor()

// extensive example
$('#editors textarea')
  .eq(0).ckeditor({ lang: 'pl', width: 300 }).end()
  .eq(1).ckeditor({ width: 500, height: 400 }).end()
  // more then one at once
  .slice(2).ckeditor({ lang: 'ar' }).end()

Internal API access

// get data from editor
$('textarea').ckeditor(function(){
  alert(this.getData());
});

// set data into editor
$('textarea').ckeditor(function(){
  this.setData("New editor content");
});

// change ui color
$('textarea').ckeditor(function(){
  this.setUiColor('#FFFFFF');
});

// remove editor from the page
$('textarea').ckeditor(function(){
  this.destroy();
});

// use editor synchronously
// requires it to be created earlier
var editor = $('textarea').ckeditorGet();
alert( editor.getData() );

jQuery integration

// use val() to get data
$('textarea:first').ckeditor(function( textarea ){
  $(textarea).val();
});

// use val() to set data
$('textarea:first').ckeditor(function( textarea ){
  $(textarea).val("New editor content");
});

// listen to creation event of any CKEditor
$( document ).bind( 'instanceCreated.ckeditor', function( editor ){
  alert( editor.name + ' has been created' );
});

Possible, not confirmed:

1. Easy editor's content lookup using selectors

There is also interesting topic about framework integration ​on our forum.

[Tobiasz Cudnik]

This patch implements all things described in actual description, although it's not subject to review yet.

Test Case is ​available online.

To get it running you have to execute this line after loading jQuery:

CKEDITOR.plugins.load( 'jquery', function()
{
  // loaded
} );