JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editor">
	<div class="toolbar">
		<span id="btnedit-bold" title="Vergedrukte text"><img src="images/bold.png" /></span>
		<span id="btnedit-italic" title="Italic text"><img src="images/italic.png" /></span>
		<span id="btnedit-underline" title="Onderstreep text"><img src="images/underline.png" /></span>
		<span id="divider">&nbsp;</span>
		<span id="btnedit-delete" title="verwijder (doorstreep) text"><img src="images/delete.png" /></span>
		<span id="divider">&nbsp;</span>
		<span id="btnedit-link" title="Insert link"><img src="images/link.png" /></span>
	</div>
	<textarea name="editor-preview" class="area" placeholder="Uw bericht"></textarea>
</div>
<p>&nbsp;</p>
<div class="editor-preview"></div>

<div id="prompt">
	<div class="prompt-background"></div>
	<div class="prompt-dialog">
		<div class="prompt-message">
			<p><b>Insert Hyperlink</b></p>
		</div>
		<form class="prompt-form">
			<p>titel</p>
			<input id="btnedit-title" type="text" style="display: block; width: 80%; margin-right: auto; margin-left: auto;">
			<p>http://example.com/</p>
			<input id="btnedit-url" type="text" style="display: block; width: 80%; margin-right: auto; margin-left: auto;">
			<button id="btnedit-ok" class="btn-orange" onClick="$('#prompt').show();">OK</button>
			<button id="btnedit-cancel" class="btn-orange" onClick="$('#prompt').hide();">cancel</button>
		</form>
	</div>
</div>

CSS

.editor .area {
	width: 600px;
	height: 200px;
	}
.editor .toolbar {
	padding: 0px;
	}
.editor-preview {
	word-wrap: break-word;      /* IE 5.5-7 */
	white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
	white-space: pre-wrap;      /* current browsers */
	cursor: pointer;
	}
.prompt-background {
	position: absolute;
	top: 0px;
	z-index: 1000;
	opacity: 0.5;
	height: 100%;
	left: 0px;
	width: 100%;
	background-color: #050;
	}
.prompt-dialog {
	position: fixed;
	width: 400px;
	z-index: 1001;
	top: 50%;
	left: 50%;
	display: block;
	margin-top: -85.5px;
	margin-left: -215px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	background-color: #fff;
	padding: 15px;
	}
.prompt-message {
	padding: 5px;
	text-align: center;
	}
.prompt-message p,
.prompt-form p {
	margin: 0;
	}
#prompt {
	display: none;
	}
.prompt-form {
	padding: 0px;
	margin: 0px;
	float: left;
	width: 100%;
	text-align: center;
	position: relative;
	}

JavaScript

$(document).ready(function() {
	$('#btnedit-bold').on("click",function(e) {
		wrapText('b');
	});

	$('#btnedit-italic').on("click",function(e) {
		wrapText('i');
	});

	$('#btnedit-underline').on("click",function(e) {
		wrapText('u');
	});

	$('#btnedit-delete').on("click",function(e) {
		wrapText('del');
	});

	$('#btnedit-link').on("click",function(e) {
		var textArea = $('.area'),
			len = textArea.val().length,
			start = textArea[0].selectionStart,
			end = textArea[0].selectionEnd,
			selectedText = textArea.val().substring(start, end);
		$('#btnedit-title').val(selectedText);
		$('#btnedit-url').val('http://');
		$('#prompt').show();
	});

	$('#btnedit-ok').on("click",function(e) {
		e.preventDefault();
		$('#prompt').hide();
	    replacement = '<a title="'+$('#btnedit-title').val()+'" href="'+$('#btnedit-url').val()+'" rel="external">' + $('#btnedit-title').val() + '</a>';
        wrapLink(replacement);
	}); 

	$('#btnedit-cancel').on("click",function(e) {
		e.preventDefault();
		$('#prompt').hide();
	}); 
});

function wrapLink(link) {
	var textArea = $('.area'),
		len = textArea.val().length,
		start = textArea[0].selectionStart,
		end = textArea[0].selectionEnd,
		selectedText = textArea.val().substring(start, end);
	textArea.val(textArea.val().substring(0, start) + link + textArea.val().substring(end, len));
	$('.area').keyup();
}


function wrapText(tag) {
	var textArea = $('.area'),
		len = textArea.val().length,
		start = textArea[0].selectionStart,
		end = textArea[0].selectionEnd,
		selectedText = textArea.val().substring(start, end),
		replacement = '<' + tag + '>' + selectedText + '</' + tag + '>';
	textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
	$('.area').keyup();
}

$(function() {	
	$('.area').keyup(function(){					
		var value = $(this).val();
		var contentAttr = $(this).attr( 'name' );
		$( '.' + contentAttr + '' ).html(value);
	})
});