Tag Editor //JavaScript Repository


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">
    background: #ff0;
    border: 0px;
    display: block;
<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

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

<script type="text/javascript">

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){
o.onCancel = function(input){
o.onSave = function(input){
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(){
    this.style.display = "none", e.value = "Editar";



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.
reference to the element that will be editable
indicates if the input should be multilined
css class name that will be applied to the edition field
filter that will be applied when the edition gets "saved"
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 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.


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

Rank (Votes: 28)