Opened 11 years ago

Last modified 11 years ago

#4210 closed New Feature

CKEditor plugin for jQuery — at Version 11

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

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

Change History (12)

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

comment:10 Changed 11 years ago by 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
} );

comment:11 Changed 11 years ago by Tobiasz Cudnik

Description: modified (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy