Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is a question that answers your problem about getting the highlighting text <a href="https://stackoverflow.com/questions/717224/how-to-get-selected-text-in-textarea">How to get selected text in textarea?</a></p> <p>About making the selected text bold you would need to use html tags or something like bbcode and parse it to html when you print it on to a page.</p> <p>EDIT: <a href="http://laboratorium.0xab.cd/jquery/fieldselection/0.2.3-test/test.html" rel="nofollow noreferrer">Here is a page that shows the jquery plugin "fieldselection" in action.</a></p> <p>EDIT 2: Here is an example of how I would've done this: <a href="http://jsfiddle.net/KscJk/9/" rel="nofollow noreferrer">jsfiddle link</a></p> <p><strong>The HTML:</strong></p> <pre><code>&lt;input id="bold" type="button" value="B" /&gt; &lt;br /&gt; &lt;textarea id="editor"&gt;&lt;/textarea&gt; &lt;div id="resultAsHtml"&gt;&lt;/div&gt; &lt;br /&gt; &lt;div id="resultAsText"&gt;&lt;/div&gt; </code></pre> <p><strong>The javascript (jquery) code:</strong></p> <pre><code>$(document).ready(function() { $("#editor").keyup(Update); function Update(){ var text = $(this).val(); var result = ParseToHtml(text); $("#resultAsHtml").html(result); $("#resultAsText").text(result); } $("#bold").click(function(){ var range = $("#editor").getSelection(); var textToReplaceWith = "[b]"+ range.text + "[/b]"; $("#editor").replaceSelection(textToReplaceWith , true); var text = $("#editor").val(); var result = ParseToHtml(text); $("#resultAsHtml").html(result); $("#resultAsText").text(result); }); function ParseToHtml(text) { text = text.replace("[b]", "&lt;b&gt;"); text = text.replace("[/b]", "&lt;/b&gt;"); text = text.replace(" ","&amp;nbsp;"); text = text.replace("\n","&lt;/br&gt;"); return text; } $("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true); }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload