JSFiddle - React, Tailwind, and code Playground

by timdown

HTML

<script src="https://rangyinputs.googlecode.com/svn/trunk/rangyinputs_jquery.min.js"></script>
<div id="controls" class="hidden"> 
    <li><a href="#" id="bold" unselectable>Bold</a></li>
    <li><a href="#">Underline</li>
    <li><a href="#">List</li>
    <li><a href="#">Preview</li>
</div>
<textarea id="description">Here is some text. Please select some and click the 'bold' link above.</textarea>

CSS

.hidden{display:none}
li{display: inline;}
textarea {width:300px;height: 150px;}

JavaScript

$('#controls').removeClass("hidden");
$('#bold').click(function(e) {
    e.preventDefault();
    $('#description').surroundSelectedText("**", "**");
});