Simple Content Editable Plugin with jQuery - contenteditable

File Size: 4.35 KB
Views Total: 3588
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Content Editable Plugin with jQuery - contenteditable

contenteditable is a lightweight jQuery plugin that makes content element of your page editable with action status (save and update).

How to use it:

1. Include jQuery and contenteditable.js

<script type="application/javascript" src=""></script>
<script type="application/javascript" src="jquery.contenteditable.js"></script>

2. Markup

<p contentEditable="true" data-key="content">EDITABLE CONTENT.</p>

3. Call the plugin

<script type="application/javascript">
	// what to do when the data has changed
	$(".output .action").html(e.action);
	for(i in e.changed){
		$(".output .key").html(i);


Change Logs:


  • add changed field object to events


  • Fixed for jQuery 1.9+ (by jQueryScript.Net)

This awesome jQuery plugin is developed by makesites. For more Advanced Usages, please check the demo page or visit the official website.