I’m written in the past on how cool contenteditable is, and what the potential usages are. Especially once you mix it with the scoped attribute, you can turn contenteditable into a pretty powerful component of an editing application of some sort. In fact, I have a few applications that I’ve been working on which called for exactly such a thing. But there’s no jQuery plugin for making stuff editable! And if you don’t have a plugin for making stuff editable, you surely don’t have one that makes utilizes the scoped attribute. Even worse, you certainly couldn’t have one that had a fallback for those browsers that didn’t support scoped just yet. Well, we do now.
About the Plugin
I’m using jQuery 1.8, and I’d recommend you use the same solely because I’m using the .on() method.
The plugin does its own feature detection. Now, I have a problem where it has no issue figuring out whether the browser supports scoped, but contenteditable comes up as unsupported.
Using The Plugin
Simplified Usage:
Take whatever selector you want, and just apply the method .editable(), and you’re set. This will make that element editable when the user double clicks on the element. It removes the contenteditable attribute on either focusout or mouseout.
$('.someDiv').editable();
Advanced Usage:
Let’s suppose you want to add or edit styles to the element. In this case, you send a parameters object where you can set stylable: true. By default, this parameter is set to false. You don’t need to have an inline stylesheet for this to work; the jQuery plugin will go through all of the elements that already exist in your selector, create a style block for you. If for some reason scoped isn’t supported, it’ll prepend an ID in front of each element’s selector.
$('.someDiv').editable({stylable:'true'})
Upcoming Feaures
I am working on incorporating in either a ‘saveable’ or ‘recoverable’ feature, where we can put a version history of the element into either localStorage or sessionStorage. I might also add something to where you can select which events do what — in case double-clicking just isn’t your thing.
Follow the Code
You can follow the repo on Github, I’m trying to keep it updated pretty regularly.
Just as an FYI, for right now the plugin is not open-sourced. It sounds kind of jerk-ish, but I’m claiming it as a copyright/ all rights reserved sort of deal. If you want to use it, just ask me and I’ll probably let you. I plan on using this plugin in some of my own JavaScript applications, and until I figure out exactly how they’ll be developed and used in a for-profit scenario, I’m claiming this as my own intellectual property.
The Demo
Here’s a JSFiddle demo for you: