Simple Text Editor

Using HTML contentEditable

by Santiago J

HTML

<button id="bold">bold</button>

<div id="editor">
<div>Hi!</div>
</div>

<pre id="output">
</pre>

TypeScript

var entityMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;',
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function(s) {
    return entityMap[s];
  });
}

function init(container) {
	container.contentEditable = true;
  document.execCommand("styleWithCSS", false, false);
}

function show(editorContainer, outputContainer) {
	outputContainer.innerHTML =
  	escapeHtml(editorContainer.innerHTML);
}

function bindCommand(sel, command, value) {
	document.querySelector(sel).addEventListener("click", e => {
  	document.execCommand(command, false, value);
  })
}

var editor = document.querySelector("#editor");
var output = document.querySelector("#output");

bindCommand("#bold", "bold");

editor.addEventListener("keyup", e => show(editor, output));

init(editor);
show(editor, output);