JSFiddle - React, Tailwind, and code Playground

by Yuval Bar-On

HTML

<script src="http://xing.github.com/wysihtml5/parser_rules/advanced.js"></script>
<script src="http://xing.github.com/wysihtml5/dist/wysihtml5-0.3.0.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link rel="stylesheet" href="http://xing.github.com/wysihtml5/css/stylesheet.css">
<ul id="wysihtml5-editor-toolbar">
    <li data-wysihtml5-command="italic" title="Make text italic (CTRL + I)" class="command"></li>
    <li data-wysihtml5-command="insertUnorderedList" title="Insert an unordered list" class="command"></li>
    <li data-wysihtml5-command="insertOrderedList" title="Insert an ordered list" class="command"></li>
    <li data-wysihtml5-command="createLink" title="Insert a link" class="command"></li>
    <li data-wysihtml5-command="insertImage" title="Insert an image" class="command"></li>
    <li data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" title="Insert headline 1" class="command"></li>
    <li data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" title="Insert headline 2" class="command"></li>
    <li data-wysihtml5-command-group="foreColor" class="fore-color" title="Color the selected text" class="command">
        <ul>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="silver"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="gray"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="maroon"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="purple"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="olive"></li>
            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="navy"></li>
    ...

JavaScript

var editor = new wysihtml5.Editor("wysihtml5-editor", {
            toolbar: "wysihtml5-editor-toolbar",
            stylesheets: ["http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css", "css/editor.css"],
            parserRules: wysihtml5ParserRules
        });

        editor.on("load", function () {
            var composer = editor.composer,
                h1 = editor.composer.element.querySelector("h1");
            if (h1) {
                composer.selection.selectNode(h1);
            }
        });