JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<script src="http://test.webastudio.com/wax/tuto_smiley_system.js"></script>
<textarea id="description" name="description"></textarea>   

<div id="emoticons">
    <a href="#" title=":)"><img alt=":)" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img alt=":(" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img alt=":o" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-surprised.png" /></a>
</div>

JavaScript

$(document).ready(function(){
			$('#emoticons img').click(function() {
			    var smiley = $(this).attr('alt');
			    ins2pos(smiley, 'description');
			});

			function ins2pos(str, id) {
			   var TextArea = document.getElementById(id);
			   var val = TextArea.value;
			   var before = val.substring(0, TextArea.selectionStart);
			   var after = val.substring(TextArea.selectionEnd, val.length);
			   TextArea.value = before + str + after;
			}
		});