Skip to content

Instantly share code, notes, and snippets.

@tracend

tracend/component.json

Last active October 9, 2015 00:17
Show Gist options
  • Save tracend/3410122 to your computer and use it in GitHub Desktop.
Save tracend/3410122 to your computer and use it in GitHub Desktop.
Download ZIP
[DEPRECATED] jQuery contentEditable() plugin. NOTE: Active Development for this plugin has moved to Makesites.org: https://github.com/makesites/jquery-contenteditable
Raw
readme.md

jQuery contentEditable() plugin

Automatically adds events on 'contenteditable' fields and returns the changed data for further processing (and saving)

Usage

In its basic implementation, the plugin method contentEditable() is attached to the parent container that has all the 'contenteditable' fields.

$("#...").contentEditable().change( myFunction );

A chained method can be attached to monitor the "change" trigger so the updates can be captured and saved.

Note that this only needs to be executed once for all included fields of the container.

Response

The object that's returned on a "change" event is a standard jQuery Event() object with the addition of these variables:

  • action : possible values are update & save , depending on the focus state of the field.
  • changed : containing the value of the changed field. the key is defined from a data-key attribute passed in the markup.

Parameters

Currently there are no parameters for this plugin

Raw
component.json
{
"name": "jquery-contenteditable",
"version": "0.1.0",
"main": ["./jquery.contenteditable.js"],
"dependencies": {
"jquery": "~1.8.2"
}
}
Raw
contenteditable.jquery.json
{
"name": "contenteditable",
"version": "0.1.0",
"title": "jQuery contentEditable",
"description": "Automatically adds events on 'contenteditable' fields and returns the changed data for further processing...",
"keywords": [
"cms",
"edit",
"content",
"editable",
"field"
],
"author": {
"name": "Makesites",
"url": "http://makesites.org"
},
"maintainers": [
{
"name": "Makis Tracend",
"email": "[email protected]",
"url": "http://github.com/tracend"
}
],
"bugs": "https://github.com/makesites/jquery-contenteditable/issues",
"homepage": "https://github.com/makesites/jquery-contenteditable",
"docs": "https://github.com/makesites/jquery-contenteditable/wiki",
"download": "http://plugins.jquery.com/contenteditable",
"licenses": [
{
"type": "MIT License",
"url": "http://makesites.org/licenses/MIT"
}
],
"dependencies": {
"jquery": "~1.8.2"
}
}
Raw
example.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery contentEditable() - Example</title>
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="application/javascript" src="jquery.contenteditable.js"></script>
<script type="application/javascript">
$(function(){
// execute once on the container
$("#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>
</head>
<body>
<div id="main">
<h1 contentEditable="true" data-key="title">My Title</h1>
<p contentEditable="true" data-key="content">Gizzle ipsum dolor boom shackalack amizzle, fo shizzle my nizzle adipiscing elit. I saw beyonces tizzles and my pizzle went crizzle dawg velizzle, crunk volutpizzle, suscipizzle pizzle, gravida vizzle, arcu. Pellentesque eget sure. Sed erizzle. Fusce izzle dolor dapibus fo shizzle tempizzle dawg. Bling bling pellentesque nibh izzle turpis. Bling bling that's the shizzle tortor. Funky fresh nizzle rhoncizzle . In dang platea dictumst. I saw beyonces tizzles and my pizzle went crizzle dapibus. Curabitizzle tellus go to hizzle, pretium doggy, mattizzle ac, eleifend vitae, fo shizzle. Boom shackalack suscipizzle. Integizzle we gonna chung velizzle sizzle purus.</p>
<section class="output">
<h3>Action: <span class="action"></span></h3>
<h3>Changed: <span class="key"></span></h3>
<p><i>Note: open the inspector for a more detailed output of the event</i></p>
</section>
</div>
</body>
</html>
Raw
jquery.contenteditable.js
// jQuery contentEditable() plugin
//
// Created by: Makis Tracend (@tracend)
// Issue: http://stackoverflow.com/a/6263537
//
// Licensed under the GPL Version 2: http://www.gnu.org/licenses/gpl-2.0.html
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this);
//reset any previous change events set
$this.unbind("change");
$this.find('[contenteditable]').each(function(){
$(this).contentEditable("field", $this);
});
});
},
field : function( parent ) {
return this.each(function(){
var $this = $(this);
// setting the key based on an attribute available on the same level as 'contentEditable'
var key = $this.attr("data-key");
// add triggers
$this.on('focus', function() {
var $this = $(this);
$this.data('enter', $this.html());
$this.data('before', $this.html());
return $this;
}).on('keyup paste', function() {
var $this = $(this);
var text = $this.html();
if ($this.data('before') !== text) {
$this.data('before', text);
var data = {};
data[key] = text;
parent.trigger({type: 'change', action : 'update', changed: data});
}
return $this;
}).on('blur', function() {
var $this = $(this);
var text = $this.html();
if ($this.data('enter') !== text) {
$this.data('enter', text);
var data = {};
data[key] = text;
parent.trigger({type: 'change', action : 'save', changed: data});
}
return $this;
})
});
}
};
$.fn.contentEditable = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.contentEditable' );
}
};
})( jQuery );
@tracend
Copy link
Author

tracend commented Mar 3, 2013

NOTE: Active Development for this plugin has moved to Makesites.org:
https://github.com/makesites/jquery-contenteditable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment