JSFiddle - React, Tailwind, and code Playground

by Valder Black

HTML

<button class="bold">Bold</button><button class="italic">italic</button><button class="red">Red</button>
<div id="txt" contenteditable="true"></div>
<button id="btn">Не сохранять этот текст</button>

CSS

#txt {
border: 1px solid #3d3d3d;
width: 100%;
height: 200px;
}

JavaScript

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

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

$( '.red' ).on( 'click', function() {
   document.execCommand( 'forecolor', false, 'red' ); 
});




var notsavetxt = false;
$('#btn').on('click', function(){
notsavetxt = true;
});
$('#txt').on('keyup', function(){
notsavetxt = false;
});

$(window).unload(function(){ 
if(!notsavetxt){
  var titlesave = title;
  var txtsave = $('#txt').html();
  var datasave = new Date().toLocaleString();
  localStorage.setItem('title', titlesave);
  localStorage.setItem('txt', txtsave);
  localStorage.setItem('data', datasave);
}
else { localStorage.clear(); }});
var titlepaste = localStorage.getItem('title');
var txtpaste = localStorage.getItem('txt') || '';
var datapaste = localStorage.getItem('data');
if ($('div').attr('contenteditable') == 'true' && txtpaste.length > 0 && confirm("Восстановить документ ''" + titlepaste + "''?\n\nПоследнее редактирование: " + datapaste)) { $('#txt').html(txtpaste); }
else { var title = prompt("Введите заголовок документа", ""); }