JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id='editor_buttons'></div>

<!--<textarea id='editor_load'></textarea><button onclick='editorLoad()'>Load this</button>-->

<textarea id='editor_html'></textarea>

<div id="editor_input" contentEditable="true">
<h3>Try to alter this text using the buttons above</h3>
<p>You can also edit the raw HTML in the box above, and it'll be reflected here. Create tables, divs, add colours to text using <i>span style='color:#ffcc33' /span</i> and so on...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper in nunc at mattis. Suspendisse metus augue, pellentesque finibus luctus dictum, tempor id nunc. Phasellus semper magna ac interdum scelerisque. Vestibulum laoreet sapien a nisi ullamcorper, nec luctus neque eleifend. Aliquam vel tortor justo. Nam aliquam dapibus mi ut volutpat. Donec eros turpis, gravida et neque nec, interdum pulvinar nibh. Ut vel sodales nulla, a tempus sem. Nunc facilisis pretium aliquam. Proin nulla ante, congue at purus sit amet, commodo placerat erat. Sed malesuada eros nulla, in cursus urna elementum finibus. Suspendisse posuere purus pellentesque rutruhm tempor. Nunc nec tincidunt est. Sed convallis ligula quis dui laoreet maximus. Nulla pharetra placerat quam ut rutrum. Nullam sit amet vehicula nisi.</p>
            <p>Pellentesque feugiat posuere fermentum. In ut varius odio, nec venenatis lorem. Pellentesque interdum odio tortor, ac hendrerit mauris venenatis nec. Maecenas finibus dapibus eleifend. Nulla rhoncus metus non nisi rutrum tempor. Cras luctus lacinia eros sed volutpat. Duis accumsan quam libero, non accumsan nisl faucibus sit amet.</p>
          <p>Cras tincidunt magna malesuada maximus tristique. Sed a fringilla ipsum. Nam malesuada gravida commodo. In ut convallis neque. Nulla ut consequat nisi, a imperdiet ante.</p>
          
Pellentesque feugiat posuere fermentum. In ut varius odio, nec...

CSS

/* Empty div where commands will appear. */
#editor_buttons {
    display: flex;
    flex-flow: row wrap;
}

/* They stretch to fill the space. Looks neater. */
#editor_buttons .btn {
    flex: 1 1 auto;
    padding: 5px;
    border: 1px solid #333;
    margin: 2px;
}

/* Clickable commands are pale grey. */
#editor_buttons .btn_success {
  background-color: #ddd;
  color: #333;
  transition: 0.3s;
}

/* These are unclickable; unsupported by browser. */
#editor_buttons .btn_error {
  background-color: grey;
  color: black;
}

/* Turn button white when hovered over. */
#editor_buttons .btn_success:hover {
    cursor: pointer;
    background-color: white;
    border: 1px solid #888;
    transition: 0.3s;
}


/* Visual editor. How the HTML will appear. */
#editor_input {
    font-family: 'Open Sans', sans-serif;
    max-height: 600px;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px auto;
}

/* Don't want any massive page-breaking pics! */
#editor_input img {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    width: auto;
}

/* Raw HTML appears in this textarea. See the tags. */
#editor_html {
    width: 100%;
    min-height: 100px;
}

JavaScript

// Simple text and HTML editor.
// Edited from https://codepen.io/chrisdavidmills/pen/gzYjag

// To use in GriffinPHP, add 'text_editor' to $this->js 
// and $this->css in the page's Controller method.

// The View or Template file must have the HTML above:
// #editor_buttons, #editor_input and #editor_html

// Used in Forum, Messages, UserProfile and PetProfile.

const editorCommands = [
  {"name": "Bold", "cmd": "bold", "icon": "bold"},
  {"name": "Italic", "cmd": "italic", "icon": "italic"},
  {"name": "Underline", "cmd": "underline", "icon": "underline"},
  {"name": "Strike", "cmd": "strikeThrough", "icon": "strikethrough"},
  {"name": "Subscript", "cmd": "subscript", "icon": "subscript"},
  {"name": "Superscript", "cmd": "superscript", "icon": "superscript"},
  {"name": "Cut", "cmd": "cut", "icon": "scissors"},
  {"name": "Copy", "cmd": "copy", "icon": "clipboard"},
  {"name": "Paste", "cmd": "paste", "icon": "clipboard"},
  {"name": "Delete", "cmd": "delete", "icon": "scissors"},
  {"name": "Link", "cmd": "createLink", "val": "", "icon": "link"},
  {"name": "Unlink", "cmd": "unlink", "icon": "chain-broken"},
  {"name": "Image", "cmd": "insertImage", "val": "http://dummyimage.com/160x90", "icon": "picture-o"},
  {"name": "Font", "cmd": "fontName", "val": "'Inconsolata', monospace"},
  {"name": "Font Size", "cmd": "fontSize", "val": "1-7", "icon": "text-height"},
  {"name": "Heading", "cmd": "heading", "val": "h3", "icon": "header"},
  {"name": "Indent", "cmd": "indent", "icon": "indent"},
  {"name": "Outdent", "cmd": "outdent", "icon": "outdent"},
  {"name": "Paragraph", "cmd": "insertParagraph", "icon": "paragraph"},
  {"name": "Horizontal Rule", "cmd": "insertHorizontalRule"},
  {"name": "Numbered List", "cmd": "insertOrderedList", "icon": "list-ol"},
  {"name": "Bullet Points", "cmd": "insertUnorderedList", "icon": "list-ul"},
  {"name": "Justify Centre", "cmd": "justifyCenter", "icon": "align-center"},
  {"name": "Justify Full", "cmd": "justifyFull",...