A good long while ago, I discovered that contenteditable was a pretty nifty attribute to play with, especially when you get CSS involved. Then I stumbled upon the scoped attribute which you can apply to a <style>block, which isolates styles to a specific container. And then I wrote a jQuery plugin. Well, now it’s gotten some spiffy updates.
Features
The first and most important feature is making something editable:
$('.someClass').editable();
When you do that, you can double-click your element to edit it, and double-click again to remove editable.
Editing the styles
I wasn’t content to just have you editing HTML; maybe you want to style that block, too! Now you can pass an object with a few parameters, one of which is stylable:
$('.editable').editable({stylable: true})
But, that’s not the only way you have to style something. Suppose you have a whole list of things that should be editable, but maybe only one of them needs to be styled. You can also control which elements are stylable through the HTML:
The plugin then generates a style block with the attribute scoped already applied, and it automatically injects a list of all of the elements inside of that element. The plugin will do a feature-check to see if scoped is a supported attribute. If it isn’t, there’s a fallback! The plugin will generate an ID for the element if one doesn’t exist, and then prepend each selector with the ID of the outer block. In other words, it comes with a scoped polyfill built in.
Recovering your work
A nifty thing about contenteditable is that you can ctrl+z your work —so long as the element is editable. If you make an element editable, make some changes, and then remove contenteditable, or set it to false, then ctrl+z is of no help. The only way to get an element back to its pristine state is to refresh the page. This is where the recoverable parameter is helpful:
$('.editable').editable({stylable: true, recoverable: true})
When an element is recoverable, the plugin creates a custom attribute on the element called data-original. It’ll stringify the content of the element and drop it in that attribute, and then parse it when it’s time to recover.
To recover an element, double-click it to make sure it’s editable, and then press the esc key. At some point I’ll bind that to a ctrl + z type of function.
Setting a Trigger
By default, it’s the dblclick event that toggles an element. You can, however, set your own. This is incredibly useful on element where something might happen on the click event. So for this, you can use the trigger parameter to pass a jQuery event:
$(".editable").editable({trigger: 'click'});
Upcoming features
I am working on a savable parameter which will be available in the next month or two. With savable, you’ll be able to save versions of your changes into localStorage. The big idea is that you can navigate away from the page, come back, and see your changes persist. That’s why your recover option uses a data attribute and not storage.
In summary
This is a fun little plugin that I actually use quite often in applications which I develop. Contenteditable and scoped styles are a big part of how we can make web-based web editors, and this plugin can help with part of that job. I welcome any feedback and forks that you’ve got coming.