jeditable textile textarea renderer issue

If you have ever played with jeditable, eventually you will get to this issue, which is dealing with the textarea. The Textile renderer on the official jeditable demo page works perfectly fine, but when I tried it I experienced quite some difficulty.

Basically the text I enter would NOT be what I see after pressing the ok button, due to the html rendering of the newline character. I found a lot of people sharing their pain all over the internet:

http://stackoverflow.com/questions/5277800/jeditable-handling-output-that-has-line-breaks http://forum.jquery.com/topic/jeditable-jquery-question-regarding-textarea

After quite some time hacking around (especially on that demo page and its source), I finally got it working that way it’s supposed to be. Here is my solution.

First, your save and load php scripts should be doing what they have been doing. No change at all. Just make sure you have clean data in the database.

Second, in your page.php file (which renders your textarea), call a string replace function to change all substring “n” to “
n”. Below is the PHP code. It will give you the good initial values, rendered correctly by your browser.

$s = str_replace("n", "
n", $s);

Third, add the following callback to your .editable attribute list. Basically, on the client side it renders the line breaks for you.

callback: function(value, settings) {
	var retval = value.replace(/n/gi, "
n");
	$(this).html(retval);
}

So it looks something like the following:

$('.editable_textile').editable('save.php', {
    indicator : '',
    loadurl   : 'load.php',
    type      : 'textarea',
    submit    : 'OK',
    callback: function(value, settings) {
	var retval = value.replace(/n/gi, "
n");
	$(this).html(retval);
    },
    cancel    : 'Cancel',
});

Then you are done! Hope this can save you some time. ;)