How is formatting in being done?</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="2017-09-01T12:22:24.860" class="fromnow">Sep 01 '17 at 12:22</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2017-09-01T12:59:39.587" datetime="2017-09-01T12:59:39.587">Sep 01 '17 at 12:59</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 3,650 times"> <span class="fc-light mr2">Viewed</span> 3,650 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="46000233" data-ownerid="6238636" data-score="0"> <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="46000233"> <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> <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=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I'm trying to build a comment system and it just came to realization. Text area cannot be formatted meaning no paragraphs, line breaks etc can be retained. I know stackoverflow uses a text editor instead of text area but on sites such as Reddit, it is just a plain textarea.</p> <p>Is formatting the value of textarea being done with javascript?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/forms" class="post-tag js-gps-track" title="show questions tagged 'forms'" rel="tag">forms</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 grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Sep 01 '17 at 12:30">edited Sep 01 '17 at 12:30</time> <a href="../../users/8344903/rohan-fating" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8344903.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rohan Fating" /> </a> <div class="s-user-card--info"> <a href="../../users/8344903/rohan-fating" class="s-user-card--link">Rohan Fating</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,135</li> <li class="s-award-bling s-award-blingsilver" title="15 silver badges">15</li> <li class="s-award-bling s-award-blingbronze" title="24 bronze badges">24</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 01 '17 at 12:22">asked Sep 01 '17 at 12:22</time> <a href="../../users/6238636/kshatriiya" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6238636.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="kshatriiya" /> </a> <div class="s-user-card--info"> <a href="../../users/6238636/kshatriiya" class="s-user-card--link">kshatriiya</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,129</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="10 silver badges">10</li> <li class="s-award-bling s-award-bling__bronze" title="19 bronze badges">19</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-46000233" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="46000233" 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-78960634" class="comment js-comment " data-comment-id="78960634" data-comment-owner-id="1954611" 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="comment78960634_46000233"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You should use a plugin for that. It depends if you use jQuery, Angular or other client-side frameworks on what plugins you can use.</span> – <a href="../../users/1954611/ice-13" title="333 reputation" class="comment-user ">ice 13</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78960634_46000233"><span title="2017-09-01T12:24:42.040 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:24</span></a></span> </div> </div> </li> <li id="comment-78960636" class="comment js-comment " data-comment-id="78960636" data-comment-owner-id="2298723" 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="comment78960636_46000233"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Maybe fake textarea? https://stackoverflow.com/questions/12831101/format-text-in-a-textarea</span> – <a href="../../users/2298723/flowen" title="395 reputation" class="comment-user ">Flowen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78960636_46000233"><span title="2017-09-01T12:24:49.333 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:24</span></a></span> </div> </div> </li> <li id="comment-78960840" class="comment js-comment " data-comment-id="78960840" data-comment-owner-id="6238636" 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="comment78960840_46000233"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@ice13 I'm using Vue to build a simple blog website with commenting system. I'd like to save the comments to database with formatting preserved. Any idea how that can be achieved?</span> – <a href="../../users/6238636/kshatriiya" title="1,129 reputation" class="comment-user owner">kshatriiya</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78960840_46000233"><span title="2017-09-01T12:30:01.440 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:30</span></a></span> </div> </div> </li> <li id="comment-78960857" class="comment js-comment " data-comment-id="78960857" data-comment-owner-id="6238636" 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="comment78960857_46000233"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Flowen I've read that thread, not quite what I'm looking for though.</span> – <a href="../../users/6238636/kshatriiya" title="1,129 reputation" class="comment-user owner">kshatriiya</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78960857_46000233"><span title="2017-09-01T12:30:22.957 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:30</span></a></span> </div> </div> </li> </ul> </div> </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">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="46000432"></a> <div id="answer-46000432" class="answer " data-answerid="46000432" data-ownerid="4486440" 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="46000432"> <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>Let's make a few things clear. A textarea is simply that; a "text area". It holds plain text, and for the record, a textarea DOES retain line breaks. But you are correct; it has no functionality beyond that. No styling, it doesn't automatically insert paragraph tags, or have any further advanced functionality you sound like you are looking for. </p> <p>It sounds to me like what you are looking for a web-based WYSIWYG (what you see is what you get) editor. Something to give simple functions like bold text, maybe indentation/text aligning buttons, and so forth. The two most popular/well-known ones are CK Editor and Tiny MCE, both of which utilize Javascript to run: <a class="external-link" href="https://ckeditor.com/" rel="nofollow noreferrer">https://ckeditor.com/</a> <a class="external-link" href="https://www.tinymce.com/" rel="nofollow noreferrer">https://www.tinymce.com/</a></p> <p>TinyMCE is the simplest. They have CDN's with their libraries so all you have to do is copy and paste a few lines of code to get it to work. Both libraries come with plugins, both free and premium, which offer advanced functionality like image uploading and etc.</p> <p>Your second approach; as of HTML 5, HTML elements can now use the <strong>contenteditable</strong> attribute which allows the HTML content in a webpage to become editable. You can create a div/element and manipulate those elements to have styling. This approach has a few pitfalls, the biggest being compatiblity for older browsers and second, posting that data to other web pages, which forces the use of Javascript to copy the content of the HTML element to a hidden input or textarea.</p> <p>This person (whom I believe came from this site) developed a useful WYSIWYG editor for going the contenteditable approach: <a class="external-link" href="http://habibhadi.com/lab/easyeditor/" rel="nofollow noreferrer">http://habibhadi.com/lab/easyeditor/</a></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 Sep 01 '17 at 12:37">edited Sep 01 '17 at 12:37</time> <a href="../../users/1620194/salketer" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1620194.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Salketer" /> </a> <div class="s-user-card--info"> <a href="../../users/1620194/salketer" class="s-user-card--link">Salketer</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">14,263</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="30 silver badges">30</li> <li class="s-award-bling s-award-blingbronze" title="58 bronze badges">58</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 Sep 01 '17 at 12:36">answered Sep 01 '17 at 12:36</time> <a href="../../users/4486440/edward-b" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4486440.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Edward B." /> </a> <div class="s-user-card--info"> <a href="../../users/4486440/edward-b" class="s-user-card--link">Edward B.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">437</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-blingbronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-46000432" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="46000432" 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-78961187" class="comment js-comment " data-comment-id="78961187" data-comment-owner-id="1620194" 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="comment78961187_46000432"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">"compatiblity for older browsers" should be ok... Even IE6 supports it. It was specified in HTML5 but most HTML4 capable browser had implemented it before.</span> – <a href="../../users/1620194/salketer" title="14,263 reputation" class="comment-user ">Salketer</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78961187_46000432"><span title="2017-09-01T12:39:33.707 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:39</span></a></span> </div> </div> </li> <li id="comment-133612110" class="comment js-comment " data-comment-id="133612110" data-comment-owner-id="19518308" 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="comment133612110_46000432"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Helped me a lot, because i didn't know that the stuff which I was looking for was called "WYSIWYG editor". Thanks! +1</span> – <a href="../../users/19518308/joel-lopes" title="71 reputation" class="comment-user ">Joel Lopes</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment133612110_46000432"><span title="2023-03-15T03:50:38.123 License: CC BY-SA 4.0" class="relativetime-clean">Mar 15 '23 at 03:50</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="46000395"></a> <div id="answer-46000395" class="answer accepted-answer" data-answerid="46000395" data-ownerid="1620194" data-score="0" 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="46000395"> <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 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>In textarea values, the line breaks are marked with the EOL character (/r, /n or /r/n). Those characters do not have any visual impact on HTML (only in the source). What you want is to make them visible by replacing them with <code><br/></code> or <code><p></p></code></p> <p>Your best bet is to replace those characters when displaying the text, so your user won't see the tags if they edit their comments.</p> <p>This, with some more options like adding <code><b></b></code> and <code><i></i></code> when text is surrounded by single or double asterisks ( * ) would give you a fairly close formatting to stackoverflow, which does use a textarea unlike you believe.</p> <p>EDIT: Like suggested by others, there exists WYSIWYG (What You See Is What You Get) editors which means the user sees exactly the result of his comment, and can edit the styles just as if they were in Microsoft Word or similar. This approach might be fine, but it is way overkill for comments. Reddit and stackoverflow allows to see a PREVIEW of your content before posting, but they do not allow to see, while typing, the live results. 2 solutions, both work, you just need to choose the one you think would be best for your users.</p> <p>Also, when using a simple textarea, you might want to look at markdown, you could provide markdown support (which is very close to how we format our text here) that way some people won't even need to (re)learn how to format their text on your site, as it is the same as other sites / tools.</p> <p>EDIT2:</p> <p>Here is a fast/basic implementation of 4 styling applications: single line-break, double line-break to paragraph, double asterisk to make bold, single asterisk to make italic. </p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#editor").on('keyup', function(e) { var input = $(e.target).val(); input = input.replace(/[\n]{2}/, '</p><p>'); input = input.replace(/[\n]{1}/, '<br/>'); input = input.replace(/\\(.+)\\/, '<strong>$1</strong>'); input = input.replace(/\(.+)\/, '<em>$1</em>'); $('#result').html('<p>' + input + '</p>'); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#result { border: 1px solid #777; background-color: #CCC; } #editor{ width:100%; height:100px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="editor"> </textarea> <div id="result"> </div></code></pre> </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 grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-09-01T12:59:39.587" class="relativetime">Sep 01 '17 at 12:59</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">Salketer</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 Sep 01 '17 at 12:33">answered Sep 01 '17 at 12:33</time> <a href="../../users/1620194/salketer" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1620194.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Salketer" /> </a> <div class="s-user-card--info"> <a href="../../users/1620194/salketer" class="s-user-card--link">Salketer</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">14,263</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="30 silver badges">30</li> <li class="s-award-bling s-award-bling__bronze" title="58 bronze badges">58</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-46000395" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="46000395" 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-78979721" class="comment js-comment " data-comment-id="78979721" data-comment-owner-id="6238636" 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="comment78979721_46000395"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you very much, exactly what I'm looking for.</span> – <a href="../../users/6238636/kshatriiya" title="1,129 reputation" class="comment-user owner">kshatriiya</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78979721_46000395"><span title="2017-09-02T00:31:11.473 License: CC BY-SA 3.0" class="relativetime-clean">Sep 02 '17 at 00:31</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="46000479"></a> <div id="answer-46000479" class="answer " data-answerid="46000479" data-ownerid="3783155" 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="46000479"> <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="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If you want advanced formatting, such as <code><em></code> and <code><strong></code>, you'll want to use an element (most likely a <code><div></code>) with the <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content" rel="nofollow noreferrer"><code>contenteditable</code></a> attribute enabled. Example:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><div contenteditable><em>Hello</em> <strong>world</strong></div></code></pre> </div> </div> <p>To make a user interface to allow the user to format the text, see:</p> <ul> <li><p><a href="../../questions/3972014/get-contenteditable-caret-position">Get caret position in contenteditable div</a></p></li> <li><p><a class="external-link" href="https://www.w3schools.com/html/html_formatting.asp" rel="nofollow noreferrer">HTML Formatting (w3schools)</a></p></li> </ul></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-09-01T12:51:36.253" class="relativetime">Sep 01 '17 at 12:51</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">clabe45</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 Sep 01 '17 at 12:39">answered Sep 01 '17 at 12:39</time> <a href="../../users/3783155/clabe45" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3783155.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="clabe45" /> </a> <div class="s-user-card--info"> <a href="../../users/3783155/clabe45" class="s-user-card--link">clabe45</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,354</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-bling__bronze" title="27 bronze badges">27</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-46000479" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="46000479" 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-78961423" class="comment js-comment " data-comment-id="78961423" data-comment-owner-id="1620194" 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="comment78961423_46000479"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">=/ there's no formatting capability on your code. how do you make something bold or italic by yourself?</span> – <a href="../../users/1620194/salketer" title="14,263 reputation" class="comment-user ">Salketer</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78961423_46000479"><span title="2017-09-01T12:45:23.143 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:45</span></a></span> </div> </div> </li> <li id="comment-78961506" class="comment js-comment " data-comment-id="78961506" data-comment-owner-id="3783155" 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="comment78961506_46000479"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Salketer you'd need some front-end functionality to make that work. I'll edit my answer to add more info.</span> – <a href="../../users/3783155/clabe45" title="2,354 reputation" class="comment-user ">clabe45</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/46000233/how-is-formatting-in-textarea-being-done#comment78961506_46000479"><span title="2017-09-01T12:47:49.207 License: CC BY-SA 3.0" class="relativetime-clean">Sep 01 '17 at 12:47</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>