Můj wysiwyg v2

by Petr Haluza

HTML

<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<div class="toolbar">
<button class="fa fa-underline" onclick="document.execCommand('underline', false, '');"></button>
<button class="fa fa-italic" onclick="document.execCommand('italic', false, '');"></button>
<button class="fa fa-bold" onclick="document.execCommand('bold', false, '');"></button>
<button class="fa fa-link" onclick="link()"></button>
<button class="fa fa-undo" onclick="document.execCommand('undo',false,'')"></button>
<button class="fa fa-repeat" onclick="document.execCommand('redo',false,'')"></button>
<button class="fa fa-strikethrough" onclick="document.execCommand('strikeThrough',false,'')"></button>
<button class="fa fa-align-center" onclick="document.execCommand('justifyCenter',false,'')"></button>
<button class="fa fa-align-left" onclick="document.execCommand('justifyLeft',false,'')"></button>
<button class="fa fa-align-right" onclick="document.execCommand('justifyRight',false,'')"></button>
</div>

<div class="editor" contenteditable="">
    <h1>Můj "vylepšený"</h1>
    <p>HTML editor</p>
</div>

<!-- jen pro demo, ukáže innerHTML editoru-->
<center><button class="ukazHTML">Ukaž Html k odeslání</button></center>
<section class="nahled"></section>
<!-- /jen pro demo, ukáže innerHTML editoru-->

</body>
</html>

CSS

* {box-sizing:border-box;}
html{ font-size: 1.1rem; font-family: Arial, sans-serif;}
.toolbar{ display:flex; background-color: #aaa; justify-content: center;}
.toolbar > button{ padding: .5rem; cursor: pointer;}
.toolbar > button:hover{ background-color: #666;}
.editor{ height: 50vh; margin: 2rem; padding: 1rem; font-size: 1rem; border: 1px solid #aaa; overflow-y: auto;}

JavaScript

var nahled = document.querySelector(".nahled");
var editorContent = document.querySelector(".editor");

//přidat url
function link() {
  var url = prompt("Zadej URL odkazu");
  document.execCommand("createLink", false, url);
}

//filtr HTML tagů při vkládání
document.querySelector(".editor").addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
});

// toto jen pro demo
var ukazHTML = document.querySelector(".ukazHTML");
ukazHTML.addEventListener("click", function() {
  var s = editorContent.innerHTML;
  nahled.style.display = "block";
  nahled.textContent = s;
});