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

Ranque (Votos: 24)

3.46