Opened 11 years ago

Last modified 11 years ago

#4210 closed New Feature

CKEditor plugin for jQuery — at Version 9

Reported by: Tobiasz Cudnik Owned by: Tobiasz Cudnik
Priority: Normal Milestone: CKEditor 3.1
Component: General Version:
Keywords: Confirmed Review+ Cc:

Description (last modified by 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

Change History (10)

comment:1 Changed 11 years ago by Tobiasz Cudnik

Owner: set to Tobiasz Cudnik
Status: newassigned

comment:2 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)

comment:3 Changed 11 years ago by Frederico Caldeira Knabben

Description: modified (diff)

comment:4 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)
Keywords: Confirmed added

comment:5 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)

comment:6 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)

comment:7 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)

comment:8 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)

comment:9 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)

Changed 11 years ago by Tobiasz Cudnik

Attachment: 4210.patch added
Note: See TracTickets for help on using tickets.
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy