Tag Editor //Repositório JavaScript

Descrição

Permite editar o conteúdo de um elemento, o chamado "edit in place".
Criado: 2006.11.05

Código (Download)

//+ Carlos R. L. Rodrigues
//@ http://jsfromhell.com/dhtml/tag-editor [rev. #1]

TagEditor = function(){
    var o = this, p; o.tags = [];
    o.getValue = function(o){
        var v = o.o.innerHTML.replace(/<br\s?\/?>/gi, "\n");
        return !o.m ? v.replace(/\s/g, " ") : v;
    }
    o.add = function(o, t, c){
        var e, s = (e = document.createElement(t ? "input" : "textarea")).style;
        t && (e.type = "text"), e.value = this.getValue(o);
        s.width = o.o.offsetWidth + "px", s.height = o.o.offsetHeight + "px";
        return c && (e.className = c), e;
    }
    o.Tag = function(i, ob, f, m, c, n){
        var _ = this;
        _.i = i, _.o = ob, _.c = c,    _.f = f, _.m = m,
        _._ = o; _.name = n, _.getValue = function(){return _._.getValue(_)}
    };
    (p = o.Tag.prototype).edit = function(){
        var _ = this, i = _.r = o.add(o.tags[_.i], !_.m, _.c);
        _.o.parentNode.insertBefore(i, _.o), _.o.parentNode.removeChild(_.o);
        _.onEdit && _.onEdit(i);
    }
    p.save = function(c){
        var $ = this.r, _ = this, f = _.f;
        if(!$) return;
        c ? _.onCancel && _.onCancel($) : _.onSave && _.onSave($);
        !c && (_.o.innerHTML = (f ? f($.value) : $.value).replace(/\n/g, "<br />"));
        $.parentNode.insertBefore(_.o, $), _.o.parentNode.removeChild($); delete _.r;
        c ? _.onAfterCancel && _.onAfterCancel(_.o) : _.onAfterSave && _.onAfterSave(_.o);
    }
    p.cancel = function(){this.save(1)}, delete p;
}
TagEditor.prototype.addTag = function(e, m, c, f, n){
    var i, o = this;
    return o.tags[i = o.tags.length] = new o.Tag(i, e, f, m, c, n);
}
TagEditor.prototype.appendToForm = function(f){
    for(var h, o, i = (o = this.tags).length; i--;){
        (h = document.createElement("input")).type = "hidden";
        h.name = o[i].name, f.appendChild((h.value = this.getValue(o[i]), h));
    }
}

Exemplo (Exemplo)

<style type="text/css">
.abc{
    background: #ff0;
    border: 0px;
    display: block;
}
</style>
<div style="background:#fee; width: 200px; height: 50px;"></div>
<div style="background:#efe; width:200px;" id="s">
    <br /><br />Presidente Lula<br />Mensal?o<br />Microsoft<br />Firefox
</div>

<form id="f" style="display:inline;">
    <input type="button" id="edit" value="Editar" />
    <input type="button" id="cancel" value="Cancelar" />
</form>

<script type="text/javascript">
//<![CDATA[

function stripTags(s){
    return s.replace(/<.*?>/g, "");
}

var t = new TagEditor(), tag = document.getElementById("s");
//t.addTag(tagRef, multiLine, classe, filtro, nameNoForm);
var o = t.addTag(tag, true, "abc", stripTags, "nomeDoCampo");
o.onEdit = function(input){
    //alert("Editar");
}
o.onCancel = function(input){
    //alert("Cancelou");
}
o.onSave = function(input){
    //alert("Salvou");
}
o.onAfterSave = function(div){
    if(div.offsetHeight < 60)
        div.style.height = "60px";
}



var c = document.getElementById("cancel"), e = document.getElementById("edit");
c.style.display = "none";
e.onclick = function(){
    var s = this.value == "Salvar", st = c.style;
    s ? (o.save(), st.display = "none") : (o.edit(), st.display = "");
    this.value = s ? "Editar" : "Salvar";
}
c.onclick = function(){
    o.cancel();
    this.style.display = "none", e.value = "Editar";
}

//]]>
</script>

Ajuda

Métodos do TagEditor

TagEditor.addTag(htmlTag: HTMLElement, multiLine: Boolean[, cssClassName: String, filter: Function, fieldName: String]): Tag

Retorna uma instancia do objeto Tag que fará o controle da edição.

htmlTag: referencia da tag a ser editada
multiLine: indica se terá multiplas linhas
cssClassName: nome da classe css para formatar o campo de edição
filter: filtro que será aplicado quando a edição for "salva"
fieldName: nome do campo de edição quando for adicionado ao formulário

TagEditor.appendToForm(form: HTMLForm): void

Adiciona todas as instãncias do objeto Tag no formulário especificado. Pode ser utilizado antes de postar um formulário para que os novos valores das tags sejam enviados.

form: formulário aonde as tags serão inseridas

Métodos da Tag

Tag.getValue(): String: Retorna o texto da tag.
Tag.edit(): void: Inicia a edição da tag.
Tag.save(): void: "Salva" o conteúdo editado.
Tag.cancel(): void: Desfaz todas as alterações feitas após o método edit ser chamado.

Eventos

Tag.onEdit: Function(input: HTMLInputElement): void

É chamado quando iniciado uma edição de tag.

input: input que está sendo editado

Tag.onCancel: Function(input: HTMLInputElement): void

Chamado quando o método cancel é invocado.

input: input que está sendo editado

Tag.onSave: Function(input: HTMLInputElement): void

Chamado quando o método save é invocado.

input: input que está sendo editado

Tag.onAfterCancel: Function(tag: Tag): void

Chamado após o método cancel ser invocado.

tag: tag que foi cancelada a edição

Tag.onAfterSave: Function(tag: Tag): void

Chamado após o método save ser invocado.

tag: tag que foi editada

JSFromHell.com