JSFiddle - React, Tailwind, and code Playground

by Valder Black

HTML

<div class="main">

	<center><h1>HTML-редактор</h1></center>
	<br>
<a href="#"  class="bold">Bold</a> 
<a href="#" class="italic">H1</a> 
<a href="#"  class="red">Click</a> 


<div id="content" contenteditable="true"></div>
<br>
<textarea onClick="this.select();" cols="30" rows="3"></textarea>

CSS

body
{
	background-image:url(http://365psd.ru/images/backgrounds/exclusive_paper.png);
	font: 14pt Cambria, Georgia, serif, sans-serif;
	color: #444444;
	line-height: 22px;
	-webkit-text-size-adjust: none;
}
.main
{
	max-width: 750px !important;
	margin: auto;
	padding: 4%;
}
#content
{
	min-height: 300px;
    display:block;
	top: 20%;
	margin: auto;
	padding: 5px;
	border: 2px dashed grey;
	border-radius: 5px;
	background: rgba(0, 0, 0,.02);
	transition: 0.2s;	
}
#content:focus {background: none; outline: none;}


a {
  color: black;
  font-weight: bold;
  text-decoration: none;
  background: #D3D3D3;
  padding: 1px 5px 2px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: .5px ForestGreen solid;
  line-height: 50px;
  transition: 0.2s;
} 
a:hover { background: #CDAA7D; }

/*  Настройки тегов */
font[color="#44944A"] {color: #444444; font-size:30px;}

JavaScript

$( '.bold' ).on( 'click', function() {
	   document.execCommand( 'bold', false, null ); 
	});

	$( '.italic' ).on( 'click', function() {
	   document.execCommand( 'forecolor', false, '#44944A'  ); 
	});

	$( '.red' ).on( 'click', function() {
	   
		var txt = $('#content').html();
		txt = txt.replace(/<font color="#44944a">/g, '<h1>');
		txt = txt.replace(/<\/font>/g, '</h1>');
		
		$('textarea').val(txt);
	});