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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></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">
$(function(){
				
$("#main").contentEditable().change(function(e){
	// what to do when the data has changed
	console.log(e);
	$(".output .action").html(e.action);
	for(i in e.changed){
		$(".output .key").html(i);
	}
});

});		
</script>

Change Logs:

2015-04-08

• add changed field object to events

2013-02-11

• 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.