inlineEdit: editor de contenidos con Mootools

Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Mié05Dic2007

inlineEdit: editor de contenidos con Mootools

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