Description
The EditInPlace(EIP) moodget allows content edition "on-site". This is great for content management systems, blogs, and all kind of applications that need to show and update content.
This plugin is under 3k, so very lightweighted. It's also unobtrusive, for all of those that don't have javascript enabled.
Sample
Just click on the text bellow and give it a try:
lorem ipsum
Html
<div class="editable">lorem ipsum</div>
Javascript
window.addEvent("load",function(){
$$("#content .editable").forEach(function(element){
new editInPlace(element).addEvent("onCompleted", EditComplete).addEvent("onCanceled", EditCanceled).addEvent("onModeChange", EditModeChange);
});
});
function EditModeChange(isInEditMode)
{
alert("changing to "+(isInEditMode?"edit mode":"text mode")+".");
}
function EditComplete(sender, value)
{
alert("new value:" + value);
}
function EditCanceled(sender, value)
{
alert("edition canceled");
}
Css
.editable{background-color:#fff;cursor:pointer;}
.editMode{display:none;}
.eip{display:none;}
.eip.editMode{display:block !important;}
Roadmap
This is some of the features that I think the EIP lacks:
- Ability to have another "trigger" rather than the html element itself.
- Also allow edition on double-click.
- Edit to a dropdownlist instead of the textarea for fixed values.
- Also edit to textbox for single line content.
- Link to a Ajax call for immediate post of changes.
- Somehow resemble a WYSIWYG editor when needed.
- Any thing more...? give your input.
License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.