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
The plugin does its own feature detection. Now, I have a problem where it has no issue figuring out whether the browser supports
contenteditable comes up as unsupported.
Using The Plugin
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
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.
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.
Here’s a JSFiddle demo for you: