Tag Editor //JavaScript Repository

Description

Allows editing the content of an element, the so called "edit in place".
Created: 2006.11.05

Code (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));
    }
}

Example (Example)

<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>

Help

Methods of TagEditor

TagEditor.addTag(htmlTag: HTMLElement, multiLine: Boolean[, cssClassName: String, filter: Function, fieldName: String]): Tag
Returns an instance of the Tag object which controls the element edition.
htmlTag
reference to the element that will be editable
multiLine
indicates if the input should be multilined
cssClassName
css class name that will be applied to the edition field
filter
filter that will be applied when the edition gets "saved"
fieldName
field name that will be used when adding the Tag to a form
TagEditor.appendToForm(form: HTMLForm): void
Adds all the instances of the Tag object into the specified form. Can be used before posting a form, to seng the tag values.
form
form where the tags will be added as hidden fields

Methods of Tag

Tag.getValue(): String
Returns the current tag text.
Tag.edit(): void
Starts the edition.
Tag.save(): void
"Saves" the edited content.
Tag.cancel(): void
Cancels the modifications made after the the edit method was called.

Events

Tag.onEdit: Function(input: HTMLInputElement): void
Called after the start method is called.
input
input que está sendo editado
Tag.onCancel: Function(input: HTMLInputElement): void
Called after the cancel method is called (before cancelling).
input
input que está sendo editado
Tag.onSave: Function(input: HTMLInputElement): void
Called after the save method is called (before saving).
input
input que está sendo editado
Tag.onAfterCancel: Function(tag: Tag): void
Called after the cancel method is called.
tag
tag que foi cancelada a edição
Tag.onAfterSave: Function(tag: Tag): void
Called after the save method is called.
tag
tag que foi editada

Rank (Votes: 29)

3.38