Setup
1. Include JQuery 1.3.2 or newer to <head>. (1.7.2 is recommended)
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js”></script>
2. Include CKEditor after JQuery. (don’t forget to check file path)
<script type=”text/javascript” src=”ck/ckeditor.js”></script> <script type=”text/javascript” src=”ck/adapters/jquery.js”></script>
3. Include ck-in-place.js after CKEditor. (don’t forget to check file path)
<script type=”text/javascript” src=”ck-in-place.js”></script>
Note: data will POST to hander in var $_POST[‘content’]. (you can define handler url with data-handler attribute. See example for more info.)
Quick Example
add to div element.
Double Click to Edit
You may edit this content, but it cannot save.
You need to add data-handler to handle the change. See next example for more info.
Quick Example with Data Handler
add and data-handler=”handler.php” to div element.
Double Click to Edit
You may edit this content then save.
handler.php will store change to cookie. Refresh this page and see it yourself!
In real use you may edit handler.php to store content in DB or do whatever you want.
p.s. cookie will expire in 1 minute after save.
Simple Tools
add to div element.
Double Click to Edit
Add simple class to show only simple tools.
You may edit this content, but it cannot save.
All Tools
add to div element.
Double Click to Edit
Add full class to show all tools.
You may edit this content, but it cannot save.
Advance Usage
You may custom it yourself.
You may edit this content, but it cannot save
Download
ck-in-place.js (3.7 KB)
CKEditor (go to ckeditor.com/download)
Or download demo (this page) and see how it work.