In order to display styled HTML instead of the pure HTML code inside a textarea, you need a JavaScript WYSIWYG editor. You can choose from many different ones, I can think of two right now: CKEditor and TinyMCE, though you can find many more. Please refer to the documentation of each one to learn about how to integrate it in your application. Read the information on their websites to decide which one suits you best.
Just to let you have a quick start, here's an example of how to easily integrate the ones I mention.
CKEditor
First, place the downloaded CKEditor package in your application's document root, so that you can access the file /ckeditor/ckeditor.js.
On the page with the textarea, add this code:
<script src="/ckeditor/ckeditor.js"></script>
<script>
window.onload = function () {
CKEDITOR.replaceAll('wysiwyg');
};
</script>
Finally, make sure the textarea in question has the wysiwyg class:
<textarea class="wysiwyg"><strong>test</strong></textarea>
TinyMCE
Again, download the package and put it somewhere in the docroot, so that the file /tinymce/tiny_mce.js is accessible.
Add this piece of code in the file containing the textarea:
<script src="/tinymce/tiny_mce.js"></script>
<script>
window.onload = function () {
tinyMCE.init({
mode: "textareas"
});
};
</script>
If you've set everything up correctly, you should get a WYSIWYG editor instead of the textarea, displaying all your styles.
