liveedit.js

ajax的文本编辑器

LiveEdit = Class.create();
LiveEdit.prototype = {
    
	initialize: function() {
		this.url  = 'save.php';
		this.id   = null;
		this.edit = false;
	},

    showForm: function(element) {
        if(this.edit == false) {
            var value = element.innerHTML;
        	element.innerHTML =  '<input type="hidden" id="edit_cancel" value="' + value + '">';
        	element.innerHTML += '<input type="text" size="30" maxlength="125" id="edit" value="' + value + '">';
        	element.innerHTML += '<a onClick="javascript:liveedit.save(\'' + element.id + '\');"><img src="images/save.png"></a> ';
        	element.innerHTML += '<a onClick="javascript:liveedit.cancel(\'' + element.id + '\');"><img src="images/cancel.png"></a>';
        	element.firstChild.focus();
            this.edit = true;
        }
    },

    save: function(id) {
        id = parseInt(id);
        this.id = id;
        var text = escape(document.getElementById('edit').value);
    	if(text != '' && text != null && text != undefined) {
            var pars = 'action=save&text=' + escape(text) + '&id=' + id;
            new Ajax.Request(this.url, {method: 'post', parameters: pars, onComplete: this.handleSave.bind(this)});        
    	}
    },

    handleSave: function(originalRequest) {
        var text = document.getElementById('edit').value;
        document.getElementById(this.id).innerHTML = text;
        this.edit = false;        
    },

    cancel: function(id) {
        id = parseInt(id);
        var text = document.getElementById('edit_cancel').value;
        document.getElementById(id).innerHTML = text;
        this.edit = false;
    }
}

var liveedit = null;
window.onload = function() {
    liveedit = new LiveEdit();
}