Ckeditor Edit-In-Place jQuery Plugin.

Posted on July 26th, 2015. Written by Dave.

This jQuery Plugin allows you to add edit in place functionality to you web site but unlike most edit-in place plugins CKeip uses ckeditor.

View The Demo

How it works ?

When ckeip is called it creates a hidden CKeditor instance on the page, when the div you wish to make editable is double clicked the div will transform into a CKeditor instance.

How to use ?

Firstly before including ckeip make sure to have included ckeditor and the jquery adapter like below.

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

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

Using ckeip is very easy and requires just one function call.

$('#my_div_1').ckeip({

e_url: 'test.php'

)};

e_url is the only required settings and should the location of the server-side file which handles the data.

the plugin uses a POST request to send the data. The ckeditor html is sent in in a from field called content

If you require additional data to be sent to the server side code you can do the following :

$('#my_div').ckeip({
e_url: 'test.php',

data: {
example_var : 'example_value',
example_var2 : 'example_value2'
}

)};

you can then access these vars on your server side page using the following (in PHP) :

$_POST['data']['example_var'];

Options

e_hover_color – The color to change the editable div to on hover.

e_height – The height of ckeditor.

e_width – The width if ckeditor.

ckeditor_config – This is the config options for ckeditor use like (see ckeditor docs for more info) :

ckeditor_config : {

toolbar:
[
['Source','-','Preview','-'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
['SelectAll','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-'],[ 'UIColor' ]

]
}

data – See above.

Callback Function

you can hav a callback function like below. The param response is the data sent back by the server side page.

$('#my_div').ckeip({
e_url: 'test.php',
e_width:100,
e_height:100,
e_hover_color:'#333',

function (response) {
alert(response);
}

);

View The Demo

Dave