JSFiddle - React, Tailwind, and code Playground

by mwillmott

HTML

<textarea id="test"></textarea>

CSS

#test {
    width: 300px;
    height: 300px;
}

div.editor {
    position: relative;
    float: left;
    background: #eaeaea;
    padding: 5px;
    margin: 0;
}

div.editor #editarea {
    position: relative;
    float: left;
    border: 1px #ccc solid;
    background: #fff;
}

div.editor .ToolBar {
    position: relative;
    float: left;
}

div.editor .ToolBar ul {
    border: none;
    margin: 0 0 2px 0;
    padding: 0;
    float: left;
}

div.editor .ToolBar ul li {
    list-style-type: none;
    float: left;
    padding: 3px;
    margin: 1px;
    color: #444;
    border: 1px solid #C6C6C6;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    background-color: whiteSmoke;
    background-image: -webkit-linear-gradient(top,#f9f9f9,#f1f1f1);
    cursor: pointer;
}

div.editor .ToolBar ul li:hover {
    border: 1px solid #a8a8a8;
    box-shadow: 1px 1px rgba(0,0,0,0.1);
    text-decoration: none;
    cursor: pointer;
}

div.editor .ToolBar ul li a {
    display: block;
    width: 16px;
    height: 16px;
    background: url(http://pietschsoft.com/demo/jHtmlArea/style/jHtmlArea.png) no-repeat -16px -500px;
    border: none;
    cursor: pointer;
    padding: 0px;
}

div.editor .ToolBar ul li a.highlighted {
    border: solid 1px #aaa;
    background-color: #bbb;
    padding: 0;
}

div.editor .ToolBar ul li.separator {
    height: 16px;
    margin: 0 2px 0 3px;
    border-left: 1px solid #ccc;
}

div.editor .ToolBar ul li.separator:hover {
    padding: 1px;
    background-color: #fff;
    border-top: none;
    border-bottom: none;
    border-right: none;
}

div.editor .ToolBar ul li a:hover {
}

div.editor .ToolBar ul li a.bold {
    background-position: 0 0;
}

div.editor .ToolBar ul li a.italic {
    background-position: -16px 0;
}

div.editor .ToolBar ul li a.underline {
    background-position: -32px 0;
}

div.editor .ToolBar ul li a.strikethrough {
    background-position: -48px 0;
}

div.editor .ToolBar ul li a.link {
    background-position: -64px...

JavaScript

(function($) {
    $.fn.editor = function(opts) {
        if (opts && typeof(opts) === "string") {
            var args = [];
            for (var i = 1; i < arguments.length; i++) {
                args.push(arguments[i]);
            }
            var htmlarea = HtmlArea(this[0]);
            var f = htmlarea[opts];
            if (f) {
                return f.apply(htmlarea, args);
            }
        }
        return this.each(function() {
            HtmlArea(this, opts);
        });
    };
    var HtmlArea = window.HtmlArea = function(elem, options) {
        if (elem.jquery) {
            return HtmlArea(elem[0]);
        }
        if (elem.htmlareaObject) {
            return elem.htmlareaObject;
        } else {
            return new HtmlArea.fn.init(elem, options);
        }
    };
    HtmlArea.fn = HtmlArea.prototype = {
        init: function(elem, options) {
            if (elem.nodeName.toLowerCase() === "textarea") {
                var opts = $.extend({}, HtmlArea.defaultOptions, options);
                elem.htmlareaObject = this;

                var textarea = this.textarea = $(elem);
                var container = this.container = $("<div/>").addClass("editor").width(textarea.width()).insertAfter(textarea);

                var toolbar = this.toolbar = $("<div/>").addClass("ToolBar").appendTo(container);
                priv.initToolBar.call(this, opts);

                //var iframe = this.iframe = $("<iframe/>").height(textarea.height());
                var editarea = this.editarea = $('<div id="editarea" contenteditable="true"/>').height(textarea.height()).width(textarea.width() - ($.browser.msie ? 0 : 4));
                //var htmlarea = this.htmlarea = $("<div/>").append(editarea);
                container.append(editarea).append(textarea.hide());

                priv.initEditor.call(this, opts);
                priv.attachEditorEvents.call(this);

                // Fix total height to match TextArea
               ...