render html in textarea

How to Render HTML in TextArea

TextArea DOM element allows you to easily input multiline texts into your website or application. But this is plain text without any formatting. What if you want to render HTML in TextArea? In this article, how to render HTML in TextArea or at least create that effect.


How to Render HTML in TextArea

On most modern web browsers, it is not possible to render HTML in TextArea yet. But you can do this using editable div. Here is a sample HTML content editable div.

<div contenteditable="true" id='my_div'></div>

Here is a sample CSS to make this div look like a TextArea.

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}

Here is a sample editable div with sample text.

<div contenteditable="true">Hello World.<br>
Good morning <strong>everyone</strong>
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

If you want to read the HTML content in this div, you will need to fetch it using innerHTML property of this div. Also, since we are using a div and not a form input, you will need to explicitly submit the div contents via AJAX or some other method. Otherwise, if you simply place this in a form, its contents will not be sent to server, by default.

In this article, we have learnt how to render HTML in TextArea.

Also read:

How to Install PuTTy on Linux
JS Object Convert to String Without Quotes
How to Highlight Text Using JavaScript
How to Check File MIME Type with JS
How to Replace Line Breaks With BR in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *