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

JSFromHell.com