PHP - Display all characters in html textarea (newline, whitespace included) - html

Question

I have a text field in MySQL that contains an e-mail template.
I build an admin interface where the admin will be able to display the content in a <textarea></textarea> and edit it.
It works great, but I'd like to actualy see the whitespaces and the \r\n, something like Notepad++ "Show All Characters" button.
Here is the email template, as it is currently shown in textarea:
And this is how I'd like to see it, like Notepad++ shows it, displaying the newlines and the whitespaces:
How can I do that using php? Should I just escape the \r\n from the database to make them to show up, or is there an other way?
Update.
I did manage to create a toggle button that displays whitespaces and newlines, even while typing.
See example demo http://jsfiddle.net/QshDd/80/
Here is where I found some of this interesting code: http://www.kristofdegrave.be/2012/03/javascript-change-entered-character-in.html

Answer 1

An approach:
before adding the text to the textarea you could make an replacement of the newline characters with some other "special" characters. Then at post before saving the content of textarea in mysql switch the "special" characters with the newline characters

Answer 2

You can use TinyMCE. Here is the reference link http://www.tinymce.com/tryit/full.php
Just give id to your text area like
<textarea id="tinyeditor" ></textarea>
In your script customize your requirement like
var editor = new TINY.editor.edit('editor', {
id: 'tinyeditor',
width: 584,
height: 175,
cssclass: 'tinyeditor',
controlclass: 'tinyeditor-control',
rowclass: 'tinyeditor-header',
dividerclass: 'tinyeditor-divider',
controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
footer: true,
fonts: ['Verdana','Arial','Georgia','Trebuchet MS'],
xhtml: true,
cssfile: 'custom.css',
bodyid: 'editor',
footerclass: 'tinyeditor-footer',
toggle: {text: 'source', activetext: 'wysiwyg', cssclass: 'toggle'},
resize: {cssclass: 'resize'}
});
And last get value from data base in textarea on document ready
$(document).ready(function(){
var template_data = '<?php echo $database_result; ?>';
$("iframe").contents().find("#editor").html(template_data);
});