inlineEdit2 es un editor de contenidos inline realizado con Mootools.
Su uso es muy sencillo, tan solo es necesario añadir el siguiente código para poder utilizarlo:
$('element').inlineEdit();
Lo más asombroso es su tamaño, 20k sin comprimir, y para los que estén deseando mirar su funcionamiento, aquà va el código:
var inlineEdit = new Class({
getOptions: function(){
return {
onComplete: function(el,oldContent,newContent){
},
type: 'input'
};
},
initialize: function(element,options){
this.setOptions(this.getOptions(), options);
if(!element.innerHTML.toLowerCase().match('<'+this.options.type)){
this.editting = element;
this.oldContent = element.innerHTML;
var content = this.oldContent.trim().replace(new RegExp("<br>", "gi"), "\n");
this.inputBox = new Element(this.options.type).setProperty('value',content).setStyles('margin:0;background:transparent;width:99.5%;font-size:100%;border:0;');
if(!this.inputBox.value){this.inputBox.setHTML(content)}
this.setAllStyles(element,this.inputBox);
this.editting.setHTML('');
this.inputBox.injectInside(this.editting);
(function(){this.inputBox.focus()}.bind(this)).delay(300);
this.inputBox.addEvent('change',this.onSave.bind(this));
this.inputBox.addEvent('blur',this.onSave.bind(this));
}
},
onSave: function(){
this.inputBox.removeEvents();
this.newContent = this.inputBox.value.trim().replace(new RegExp("\n", "gi"), "<br>");
this.editting.setHTML(this.newContent);
this.fireEvent('onComplete', [this.editting,this.oldContent,this.newContent]);
},
setAllStyles: function(prevel,el){
if(prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));
if(prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));
if(prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));
if(prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));
if(prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));
if(prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));
}
});
Element.extend({
inlineEdit: function(options) {
return new inlineEdit(this, options);
}
});
inlineEdit.implement(new Events);
inlineEdit.implement(new Options);
Algo que nos puede ser útil en lugares como wikis o parecidos.
inlineEdit 2
Se agradece! 🙂
Como pega le pondrÃa que para páginas con ancho variable no irÃa bien, pero vamos, según cuentas es algo chapucero asà que está más que de sobra jeje!
Gracias!
PAZ!!
Existe una extension para firefox y firebug que se llama pixelperfect que hace esto mismo de manera más simple…
¡Viva firebug!
fmvilas, sÃ, incluso me han dicho que le añadiera un grid 🙂
Jaime, no la conocÃa y si hice esto es porque busqué y no encontré 🙁 Muchas gracias, instalo ya mismo… ¡viva firebug! 🙂