Ckeditor Edit-In-Place jQuery Plugin.
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.
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);
}
);
