JSFiddle - React, Tailwind, and code Playground

by Valder Black

HTML

<br/>
<b><a id="lnk" href="#">Add link</a></b>
<br/><br/>
<div id="content" contenteditable="true"><div>
<br><br><br><br><br><br><br><br><br><br>
<textarea id="txt" cols=50 rows=10></textarea>

CSS

#lnk
{
    padding: 6px;
	font-family: "Georgia";
    text-align: center;
    border: 1px solid lightgrey;
	color: #3d3d3d;
    text-decoration: none;
    border-radius: 6px;
    margin-left: 10px;
    transition: 0.5s;
}
#lnk:hover {color: ForestGreen; box-shadow: 1px 0 1px ForestGreen, -1px 0 1px ForestGreen, 0 1px 1px ForestGreen, 0 -1px 1px ForestGreen;}

#content
{
    width: 60%;
    height: 5em;
    border: 1px dashed grey;
    border-radius: 6px;
    padding: 5px;
    outline: none;
    transition: 0.3s;
}
#content:focus {border: 1px dashed #242424;}

JavaScript

$('#lnk').on('click', function() {
    var url = prompt('Введите URL:', 'http://');
    if (!url) return;
	document.execCommand('CreateLink', false, url);
    setTimeout(function() {
    	var a = $('#content').html();
    	a= a.replace(/\<a\s*href\s*=\s*["']##(\w*)["']\>([^\<]*)\<\/a\>/gim, "<a name='$1'>$2</a>");
    	$('#content').html(a);
    }, 10);
});
	
setInterval(function() {$('#txt').val($('#content').html())}, 100);