Can I embed HTML formatting inside of a tag?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2010-04-05T18:33:39.193" class="fromnow">Apr 05 '10 at 18:33</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-07-26T23:42:23.867" datetime="2020-07-26T23:42:23.867">Jul 26 '20 at 23:42</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 108,839 times"> <span class="fc-light mr2">Viewed</span> 1.1e+01k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="2580247" data-ownerid="7285" data-score="45"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="2580247"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="45">45</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If I have a <code>textarea</code> block like so...</p> <pre><code><textarea name="myTextArea" cols="100" rows="20" readonly=readonly> .. text area content ... </textarea> </code></pre> <p>How can I embed HTML formatted text inside this text block? If I can I had figured the following should work...</p> <pre><code><textarea name="myTextArea" cols="100" rows="20" readonly=readonly> <b>Hello how are you today?</b> </textarea> </code></pre> <p>As an example. But that sentence does not show up as bold. Maybe I'm just trying to do something that can't be done?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 05 '10 at 18:33">asked Apr 05 '10 at 18:33</time> <a href="../../users/7285/rob-segal" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7285.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rob Segal" /> </a> <div class="s-user-card--info"> <a href="../../users/7285/rob-segal" class="s-user-card--link">Rob Segal</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,515</li> <li class="s-award-bling s-award-blinggold" title="12 gold badges">12</li> <li class="s-award-bling s-award-blingsilver" title="43 silver badges">43</li> <li class="s-award-bling s-award-blingbronze" title="72 bronze badges">72</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">10 Answers<span style="display:none;" itemprop="answerCount">10</span></h2> </div> </div> </div> <a name="2580264"></a> <div id="answer-2580264" class="answer accepted-answer" data-answerid="2580264" data-ownerid="223858" data-score="34" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="2580264"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="34">34</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I am pretty sure the answer is no -- cannot do it with a textarea.</p> <p>From the <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="noreferrer">MDN docs</a>:</p> <blockquote> <p>The HTML <textarea> element represents a multi-line plain-text editing control. </p> <ul> <li>Permitted content Text </li> </ul> </blockquote></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Apr 28 '17 at 13:21">edited Apr 28 '17 at 13:21</time> <a href="../../users/2605840/norbert-b" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2605840.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Norbert B." /> </a> <div class="s-user-card--info"> <a href="../../users/2605840/norbert-b" class="s-user-card--link">Norbert B.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,650</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="25 silver badges">25</li> <li class="s-award-bling s-award-blingbronze" title="30 bronze badges">30</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 05 '10 at 18:35">answered Apr 05 '10 at 18:35</time> <a href="../../users/223858/mjb" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/223858.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="MJB" /> </a> <div class="s-user-card--info"> <a href="../../users/223858/mjb" class="s-user-card--link">MJB</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,639</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="31 silver badges">31</li> <li class="s-award-bling s-award-blingbronze" title="41 bronze badges">41</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="37479220"></a> <div id="answer-37479220" class="answer " data-answerid="37479220" data-ownerid="5777549" data-score="20" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="37479220"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="20">20</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Is not possible with </p> <pre><code><textarea> </code></pre> <p>Use this:</p> <pre><code><div contenteditable="true"> </div> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 27 '16 at 09:00">answered May 27 '16 at 09:00</time> <a href="../../users/5777549/sebastin-anthony" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5777549.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Sebastin Anthony" /> </a> <div class="s-user-card--info"> <a href="../../users/5777549/sebastin-anthony" class="s-user-card--link">Sebastin Anthony</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">622</li> <li class="s-award-bling s-award-blingsilver" title="5 silver badges">5</li> <li class="s-award-bling s-award-bling__bronze" title="18 bronze badges">18</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-37479220" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="37479220" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-83915628" class="comment js-comment " data-comment-id="83915628" data-comment-owner-id="3088045" data-comment-score="3"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">3</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment83915628_37479220"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This allows to edit the content of a ```div``` but doesn't allow to display the content as rendered HTML. Try to type ```<b>aoba</b>``` there and it will not display as bold.</span> – <a href="../../users/3088045/kamafeather" title="8,663 reputation" class="comment-user ">Kamafeather</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment83915628_37479220"><span title="2018-01-26T12:32:04.877 License: CC BY-SA 3.0" class="relativetime-clean">Jan 26 '18 at 12:32</span></a></span> </div> </div> </li> <li id="comment-115873602" class="comment js-comment " data-comment-id="115873602" data-comment-owner-id="6702598" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment115873602_37479220"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It won't render on the fly (like a WYSIWYG editor might do), but you sure can do `<div contenteditable="true">Something in <i>italic</i>.</div>`</span> – <a href="../../users/6702598/darktrick" title="2,447 reputation" class="comment-user ">DarkTrick</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment115873602_37479220"><span title="2021-01-02T14:11:39.887 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '21 at 14:11</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="26490259"></a> <div id="answer-26490259" class="answer " data-answerid="26490259" data-ownerid="306179" data-score="8" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="26490259"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="8">8</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You are correct, it cannot be done.</p> <p><a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="nofollow noreferrer">According to MDN</a>, "<a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/CharacterData" rel="nofollow noreferrer">character data</a>" is the only permitted content for a <code><textarea></code>.</p> <p>As other answers have described, what you are looking for is a WYSIWYG editor, like <a class="external-link" href="http://ckeditor.com/" rel="nofollow noreferrer">CKEditor</a>, <a class="external-link" href="http://www.tinymce.com/" rel="nofollow noreferrer">TinyMCE</a>, or Kendo's <a class="external-link" href="http://demos.telerik.com/kendo-ui/editor/index" rel="nofollow noreferrer">Editor</a>.</p> <p>This is beside the point, but interestingly, MDN lists some examples on their <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement" rel="nofollow noreferrer">HTMLTextAreaElement</a> page on how to <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#Insert_HTML_tags_example" rel="nofollow noreferrer">enable dynamic adding of HTML tags</a> around text in a <code><textarea></code> and how to <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#Autogrowing_textarea_example" rel="nofollow noreferrer">enable autogrow behavior</a> for a <code><textarea></code>.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-04-28T14:58:59.740" class="relativetime">Apr 28 '17 at 14:58</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">John Washam</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 21 '14 at 15:17">answered Oct 21 '14 at 15:17</time> <a href="../../users/306179/john-washam" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/306179.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="John Washam" /> </a> <div class="s-user-card--info"> <a href="../../users/306179/john-washam" class="s-user-card--link">John Washam</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,073</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="32 silver badges">32</li> <li class="s-award-bling s-award-blingbronze" title="43 bronze badges">43</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="2580523"></a> <div id="answer-2580523" class="answer " data-answerid="2580523" data-ownerid="50964" data-score="7" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="2580523"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can do this (convert the "special" characters):</p> <pre><code><textarea name="myTextArea" cols="100" rows="20" readonly=readonly> <b>Hello how are you today?</b> </textarea> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 05 '10 at 19:13">answered Apr 05 '10 at 19:13</time> <a href="../../users/50964/37stars" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/50964.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="37Stars" /> </a> <div class="s-user-card--info"> <a href="../../users/50964/37stars" class="s-user-card--link">37Stars</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,489</li> <li class="s-award-bling s-award-blingsilver" title="20 silver badges">20</li> <li class="s-award-bling s-award-blingbronze" title="23 bronze badges">23</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-2580523" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="2580523" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-2592354" class="comment js-comment " data-comment-id="2592354" data-comment-owner-id="7285" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment2592354_2580523"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yeh that doesn't work for me. Thanks for the suggestion though.</span> – <a href="../../users/7285/rob-segal" title="7,515 reputation" class="comment-user owner">Rob Segal</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment2592354_2580523"><span title="2010-04-06T13:42:50.770 License: CC BY-SA 2.5" class="relativetime-clean">Apr 06 '10 at 13:42</span></a></span> </div> </div> </li> <li id="comment-2592827" class="comment js-comment " data-comment-id="2592827" data-comment-owner-id="50964" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment2592827_2580523"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Ah, I misunderstood your question then. I thought you wanted to see the HTML tags.</span> – <a href="../../users/50964/37stars" title="2,489 reputation" class="comment-user ">37Stars</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment2592827_2580523"><span title="2010-04-06T14:39:13.247 License: CC BY-SA 2.5" class="relativetime-clean">Apr 06 '10 at 14:39</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="2580327"></a> <div id="answer-2580327" class="answer " data-answerid="2580327" data-ownerid="248129" data-score="4" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="2580327"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="4">4</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Nope! If you validated that in an HTML document, you'd get an error along the lines of</p> <blockquote> <p>document type does not allow element "b" here</p> </blockquote> <p>What you might be looking for is a What-You-See-Is-What-You-Get editor, which is actually an <code><iframe></code> which is making use of a JavaScript feature <code>designMode</code>. It's possible to find <a class="external-link" href="http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.asp" rel="nofollow noreferrer">tutorials on how to create these</a> (<a class="external-link" href="https://web.archive.org/web/20100302145650/http://www.devguru.com:80/features/tutorials/wysiwyg/wysiwyg1.asp" rel="nofollow noreferrer">archive</a>), but it's a much, much better idea to use an existing one, as for it to be really useful and usable takes a lot of work.</p> <p>Take note that - if you were still interested in validation, which you should be if you're working with HTML - is that you won't be able to use a strict <code>DOCTYPE</code> declaration, as the WYSIWYG editor will be using an <code>iframe</code>.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Feb 08 '18 at 06:19">edited Feb 08 '18 at 06:19</time> <a href="../../users/2165759/omegastripes" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2165759.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="omegastripes" /> </a> <div class="s-user-card--info"> <a href="../../users/2165759/omegastripes" class="s-user-card--link">omegastripes</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">12,351</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="45 silver badges">45</li> <li class="s-award-bling s-award-blingbronze" title="96 bronze badges">96</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 05 '10 at 18:47">answered Apr 05 '10 at 18:47</time> <a href="../../users/248129/richard-jp-le-guen" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/248129.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Richard JP Le Guen" /> </a> <div class="s-user-card--info"> <a href="../../users/248129/richard-jp-le-guen" class="s-user-card--link">Richard JP Le Guen</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">28,364</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="89 silver badges">89</li> <li class="s-award-bling s-award-blingbronze" title="119 bronze badges">119</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="27619863"></a> <div id="answer-27619863" class="answer " data-answerid="27619863" data-ownerid="3676157" data-score="3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="27619863"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can try this too its simple and if you are using asp.net use lable contron in text area add this as </p> <pre><code>Text="< stonename >" "&lt";stonename"&gt"; </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Dec 23 '14 at 12:14">edited Dec 23 '14 at 12:14</time> <a href="../../users/1699210/bummi" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1699210.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="bummi" /> </a> <div class="s-user-card--info"> <a href="../../users/1699210/bummi" class="s-user-card--link">bummi</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">27,123</li> <li class="s-award-bling s-award-blinggold" title="14 gold badges">14</li> <li class="s-award-bling s-award-blingsilver" title="62 silver badges">62</li> <li class="s-award-bling s-award-blingbronze" title="101 bronze badges">101</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 23 '14 at 11:55">answered Dec 23 '14 at 11:55</time> <a href="../../users/3676157/rohil-patel" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3676157.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rohil Patel" /> </a> <div class="s-user-card--info"> <a href="../../users/3676157/rohil-patel" class="s-user-card--link">Rohil Patel</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">235</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="4 silver badges">4</li> <li class="s-award-bling s-award-blingbronze" title="16 bronze badges">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="46360766"></a> <div id="answer-46360766" class="answer " data-answerid="46360766" data-ownerid="6504460" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="46360766"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can not do that inside textarea but what you can do...you can use p tag and parse information to tag by JQuery. Something like this: </p> <pre><code> var stringviewinfo ="aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaa<b>aaaaaaaa</b>aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaa<font color=\"red\">AAAA</font>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<b>aaaaaaaaaaaaa<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"; $('#viewinfo').html(stringviewinfo); <p style="word-wrap: break-word;" id="viewinfo"></p> </code></pre> <p>I hope this will help. </p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Sep 22 '17 at 08:59">answered Sep 22 '17 at 08:59</time> <a href="../../users/6504460/jevgenij-kononov" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6504460.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jevgenij Kononov" /> </a> <div class="s-user-card--info"> <a href="../../users/6504460/jevgenij-kononov" class="s-user-card--link">Jevgenij Kononov</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,210</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-blingbronze" title="11 bronze badges">11</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-46360766" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="46360766" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-96747948" class="comment js-comment " data-comment-id="96747948" data-comment-owner-id="1151080" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96747948_46360766"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">In plain JavaScript: `var stringviewinfo = "..."; document.getElementById("viewinfo").innerHTML = stringviewinfo;`.</span> – <a href="../../users/1151080/ben-j" title="589 reputation" class="comment-user ">Ben J</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment96747948_46360766"><span title="2019-03-05T05:11:23.263 License: CC BY-SA 4.0" class="relativetime-clean">Mar 05 '19 at 05:11</span></a></span> </div> </div> </li> <li id="comment-96747958" class="comment js-comment " data-comment-id="96747958" data-comment-owner-id="1151080" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96747958_46360766"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Note for people new to this: Always remember whenever you do something like this, if you are getting the HTML string from a user, they can choose any string they want, which might break your own HTML (especially if you save the string on a server, and so allow the user to choose arbitrary code that runs on _other people's_ browsers, this can be a security risk). See [Cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting). So you need to limit what the string is allowed to be, so it will behave as expected.</span> – <a href="../../users/1151080/ben-j" title="589 reputation" class="comment-user ">Ben J</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment96747958_46360766"><span title="2019-03-05T05:11:46.257 License: CC BY-SA 4.0" class="relativetime-clean">Mar 05 '19 at 05:11</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="51585108"></a> <div id="answer-51585108" class="answer " data-answerid="51585108" data-ownerid="294702" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="51585108"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>By now (8 years later) you know textarea is not the way to go.<br/><br/> If you happen to be using Vue.js, you can use a div with v-html to set the inner HTML<br/></p> <pre><code><template> <div name="myTextArea" cols="100" rows="20" readonly=readonly v-html="content" /> </template> <script> export default { data() { return{ content = "<b>Hello how are you today?</b>"; } } </script> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 29 '18 at 22:36">answered Jul 29 '18 at 22:36</time> <a href="../../users/294702/monothreaded" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/294702.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="MonoThreaded" /> </a> <div class="s-user-card--info"> <a href="../../users/294702/monothreaded" class="s-user-card--link">MonoThreaded</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,429</li> <li class="s-award-bling s-award-blinggold" title="12 gold badges">12</li> <li class="s-award-bling s-award-blingsilver" title="71 silver badges">71</li> <li class="s-award-bling s-award-blingbronze" title="102 bronze badges">102</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="42721316"></a> <div id="answer-42721316" class="answer " data-answerid="42721316" data-ownerid="6558959" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42721316"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Here is the answer.</p> <p>Use this function.</p> <pre><code>function br2nl(varTest) { return varTest.replace(/<br\s*\/?>/ig, "\r"); } </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 10 '17 at 14:55">answered Mar 10 '17 at 14:55</time> <a href="../../users/6558959/hardik-kalathiya" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6558959.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Hardik Kalathiya" /> </a> <div class="s-user-card--info"> <a href="../../users/6558959/hardik-kalathiya" class="s-user-card--link">Hardik Kalathiya</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,221</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="18 silver badge">18</li> <li class="s-award-bling s-award-blingbronze" title="28 bronze badge">28</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="63106931"></a> <div id="answer-63106931" class="answer " data-answerid="63106931" data-ownerid="8585501" data-score="-2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="63106931"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-2">-2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There is a very simple way you can achieve that.</p> <p><strong>First: Customize the <code><textarea></code> to accept and save special chars to DB</strong></p> <p><code><textarea contenteditable="true" class="form-control" name="setting[header_code]"><?php echo set_value('setting[header_code]', html_entity_decode($item->header_code)) ?></textarea></code></p> <p><strong>Second: extract and echo the saved data from DB</strong></p> <p><code><?php echo html_entity_decode(config(nl2br('header_code')));?></code></p> <p>Hope it can help you.</p> <p>Thanks</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 26 '20 at 23:42">answered Jul 26 '20 at 23:42</time> <a href="../../users/8585501/jodyshop" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8585501.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jodyshop" /> </a> <div class="s-user-card--info"> <a href="../../users/8585501/jodyshop" class="s-user-card--link">Jodyshop</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">656</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badges">8</li> <li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-63106931" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="63106931" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-111593936" class="comment js-comment " data-comment-id="111593936" data-comment-owner-id="4665" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment111593936_63106931"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This question is about HTML, php is not relevant here. Encoding HTML characters is not what the question is asking about.</span> – <a href="../../users/4665/jon-p" title="19,442 reputation" class="comment-user ">Jon P</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/2580247/can-i-embed-html-formatting-inside-of-a-textarea-tag#comment111593936_63106931"><span title="2020-07-27T00:04:37.590 License: CC BY-SA 4.0" class="relativetime-clean">Jul 27 '20 at 00:04</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/35027967/how-do-i-keep-data-in-a-textarea-as-is" class="question-hyperlink">How do I keep data in a textarea as is?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/44052454/how-to-display-formatted-html-in-text-area-in-angularjs" class="question-hyperlink">How to display formatted html in text area in angularjs?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">-1</div></a> <a href="../../questions/45579326/use-html-to-format-the-output-from-a-javascript-object" class="question-hyperlink">Use html to format the output from a JavaScript object</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/55875364/how-to-give-bold-styles-to-jquery-variables" class="question-hyperlink">how to give bold styles to jquery variables</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/61994655/how-can-i-add-font-awesome-icons-to-a-textarea-as-emojis" class="question-hyperlink">How can i add font awesome icons to a textarea as emojis</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/64411481/replace-empty-lines-with-p-tags-in-textarea-and-show-it-as-html-valid-code" class="question-hyperlink">Replace empty lines with <p> tags in textarea and show it as HTML valid code</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/68950789/adding-style-to-specific-word-just-replaces-the-word" class="question-hyperlink">Adding style to specific word just replaces the word</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">-2</div></a> <a href="../../questions/10029392/escaping-stripping-html-tags-in-internet-explorer" class="question-hyperlink">escaping/stripping html tags in internet explorer</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">2</div></a> <a href="../../questions/17785845/convert-html-tag-in-textarea-to-rich-text" class="question-hyperlink">Convert html tag in textarea to rich text</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/21424892/checkbox-inside-textarea" class="question-hyperlink">Checkbox inside textarea</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">-4</div></a> <a href="../../questions/24416019/add-formatted-text-inside-a-text-box-in-jquery" class="question-hyperlink">Add formatted text inside a text box in jQuery</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/24830603/razor-syntax-html-raw-not-working-in-textarea" class="question-hyperlink">Razor Syntax: Html.Raw not working in <textarea></a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>