JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<div class="container">
  <div class="header">
    <select id="fontBox" onchange="changeFont();" title="Change Font...">
      <optgroup label="Sans Serif">
        <option value="openSans">Open Sans</option>
        <option value="muli">Muli</option>
      </optgroup>
      <optgroup label="Serif">
        <option value="kreon">Kreon</option>
      </optgroup>
    </select>
    <button onclick="printElem('#editBox');">
      <img class="icon" src="http://uxrepo.com/static/icon-sets/ionicons/svg/printer.svg" />
    </button>
    <input id="titleInput" type="text" placeholder="Give it a title!" onkeypress="titleChange();" onkeydown="titleChange();" oninput="titleChange();" onpaste="titleChange();" />
  </div>
  <div id="editBox" onclick="getRidOfTheThingInitially(this)" contenteditable="true">
    Click to type... </div>
</div>

CSS

html,
body,
.container {
  position: absolute;
  margin: 0;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.header {
  height: 30px;
  vertical-align: middle;
  border: 1px solid black;
  border-bottom: 0px;
}

#editBox {
  height: calc(100% - 33px);
  border: 1px solid black;
  font-family: 'Open Sans';
  overflow: auto;
}

img.icon {
  width: 15px;
}
select,
input,
button {
  margin: 3px;
}

JavaScript

var documentTitle = "Untitled Document - ZoozaEdit Beta";
// Print Div from http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div
function printElem(elem) {
  Popup($(elem).html());
}

function Popup(data) {
  var mywindow = window.open('', 'my div', 'height=400,width=600');
  mywindow.document.write('<html><head><title>' + documentTitle + '</title>');
  mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://zoozaedit.x10.mx/cgi-bin/print.css">');
  mywindow.document.write('</head><body style="font-family:' + document.getElementById("editBox").style.fontFamily + '">');
  mywindow.document.write(data);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10

  mywindow.print();
  mywindow.onafterprint = function() {
    mywindow.close();
  }

  return true;
}

function titleChange() {
  if (document.getElementById("titleInput").value == "") {
    document.title = "ZoozaEdit Beta";
    documentTitle = "Untitled Document - ZoozaEdit Beta";
  } else {
    document.title = document.getElementById("titleInput").value;
    documentTitle = document.getElementById("titleInput").value + " - ZoozaEdit Beta";
  }
}

var x = 0;
function changeFont() {
  if (document.getElementById("fontBox").value == "openSans") {
    document.getElementById("editBox").style.fontFamily = "'Open Sans'";
  } else if (document.getElementById("fontBox").value == "muli") {
    document.getElementById("editBox").style.fontFamily = "'Muli'";
  } else if (document.getElementById("fontBox").value == "kreon") {
    document.getElementById("editBox").style.fontFamily = "'Kreon'";
  } else {
    document.getElementById("editBox").style.fontFamily = document.getElementById("fontBox").value;
  }
}

function getRidOfTheThingInitially(ident) {
  if (x == 0) {
    ident.innerHTML = "";
    x = 1;
  }
}