JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic"></script>
<!DOCTYPE HTML>

<div id="textEditor">
    <!-- texteditor buttons -->
    <div id="textEditorButtons">
        <button id="boldButton">Bold</button>
        <button id="italicButton">Italic</button>
        <button id="underlineButton">Underline</button>
        <button id="strikethroughButton">Strikethrough</button>
        <button id="superscriptButton">Superscript</button>
        <button id="subscriptButton">Subscript</button>
        <button id="undoButton">Undo</button>
        <button id="redoButton">Redo</button>
        <button id="link">Link</button>
    </div>
    
    <!-- texteditor field -->
    <div spellcheck="false" id="textEditorField" contenteditable="true" style="background-color: rgba(100, 100, 100, 0.3); height: 50px;"></div>
</div>

CSS

@font-face {
	font-family: "Caviar Dreams";
	src: url("http://kdevv.uk/fonts/caviardreams/CaviarDreams.ttf");
}
@font-face {
	font-family: "Caviar Dreams Bold";
	src: url("http://kdevv.uk/fonts/caviardreams/CaviarDreams_Bold.ttf");
}
@font-face {
	font-family: "Caviar Dreams Italic";
	src: url("http://kdevv.uk/fonts/caviardreams/CaviarDreams_Italic.ttf");
}
@font-face {
	font-family: "Caviar Dreams Bold Italic";
	src: url("http://kdevv.uk/fonts/caviardreams/CaviarDreams_BoldItalic.ttf");
}

i {
	font-family: "Caviar Dreams Italic";
}
b {
	font-family: "Caviar Dreams Bold";
	font-weight: normal;
}
b i, i b {
	font-family: "Caviar Dreams Bold Italic";
	font-weight: normal;
}

#textEditorField {
    font-family: "Caviar Dreams";
    margin-top:10px;
}

JavaScript

var editor = document.getElementById('textEditorField');

var boldButton = document.getElementById('boldButton');
var italicButton = document.getElementById('italicButton');
var underlineButton = document.getElementById('underlineButton');
var strikethroughButton = document.getElementById('strikethroughButton');
var undoButton = document.getElementById('undoButton');
var redoButton = document.getElementById('redoButton');
var superscriptButton = document.getElementById('superscriptButton');
var subscriptButton = document.getElementById('subscriptButton');

boldButton.onclick = function() { document.execCommand('bold', false, null); updatePost(); return false; }
italicButton.onclick = function() { document.execCommand('italic', false, null); updatePost(); return false; }
underlineButton.onclick = function() { document.execCommand('underline', false, null); updatePost(); return false; }
strikethroughButton.onclick = function() { document.execCommand('strikeThrough', false, null); updatePost(); return false; }
undoButton.onclick = function() { document.execCommand('undo', false, null); updatePost(); return false; }
redoButton.onclick = function() { document.execCommand('redo', false, null); updatePost(); return false; }
superscriptButton.onclick = function() { document.execCommand('superscript', false, null); updatePost(); return false; }
subscriptButton.onclick = function() { document.execCommand('subscript', false, null); updatePost(); return false; }