Found !
I don’t know how but it works well now :) I have also put a check if leaving with empty value

//once the dom is ready
window.addEvent(‘domready’, function() {
//find the editable

$$(‘.editable’).each(function(el) {

//add double-click and blur events
el.addEvent(‘dblclick’,function() {
el.removeClass(‘editable’);

//store “before” message
var before = el.get(‘text’).trim();
var before2 = el.get(‘id’).trim();
//erase current
el.set(‘html’,”);
//replace current text/content with input or textarea element
if(el.hasClass(‘textarea’))
{
var input = new Element(‘textarea’, { ‘class’:'box’, ‘text’:before });
}
else
{
var input = new Element(‘input’, { ‘class’:'box’, ‘value’:before });
//blur input when they press “Enter”
input.addEvent(‘keydown’, function(e) { if(e.key == ‘enter’) { this.fireEvent(‘blur’); } });
}
input.inject(el).select();
//add blur event to input
input.addEvent(‘blur’, function() {
//get value, place it in original element
val = input.get(‘value’).trim();

var iWhere = val.indexOf(‘ -1) {
el.set(‘text’,before);
} else {
if(val==”) {
el.set(‘text’,before2);
} else {
el.set(‘text’,val);
}
}

//save respective record
var url = ‘ajax/saveCompetence.php?id=’ + el.get(‘rel’) + ‘&content=’ + el.get(‘text’);
var request = new Request({
url:url,
method:’post’
}).send();
});
});
});
});

This script’s very good and it is exactely what I was searching, thanks for this blog David, it has already helped me several time :)
But I have a problem with this script, when you dblclick twice it “edit” the input box and write :

If anyone know this issue, please tell me :)

if(el.get(‘text’)!=before){
…..AJAX CALL
}
else{
el.addClass(‘editable’)
}

my english sucks, i know :(

Here is the code :

//once the dom is ready

window.addEvent(‘domready’, function() {

//find the editable areas
$$(‘.editable’).each(function(el) {
//add double-click and blur events
el.addEvent(‘dblclick’,function() {
el.removeClass(‘editable’);
//store “before” message
var before = el.get(‘html’).trim();
//erase current
el.set(‘html’,”);

var input = new Element(‘textarea’, { ‘class’:'box’, ‘text’:before });
input.inject(el).select();
/* create a nicEdit instance in the input element ( must have nicEdit.js loaded befor ) */
var editor = new nicEditor().panelInstance(input);

var input2 = new Element(‘button’, { ‘class’:'button’, ‘text’:'Save’ });
input2.inject(el);
input2.addEvent(‘click’, function() {
//get value, place it in original element
e = nicEditors.findEditor(input);
if(e) {
/* get the content of the editor */
var content = e.getContent();
//e.removePanel();
el.set(‘html’,content).addClass(content != ” ? ” : ‘editable-empty’);

var req = new Request({
url:document.location.href,
onSuccess : function(response) {
var roar = new Roar();
roar.alert(‘my personal response’,response);
el.addClass(’editable’);
},
onFailure: function() {
el.addClass(’editable’);
}
}).post({divContent:content,id:el.get(‘rel’)});
}
});
});
});

});

And it works fine for me.
Great thanks. ( forgive my poor english ^^’ )