JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<textarea name="" id="" cols="30" rows="10"></textarea>

SCSS

._richtext{
    border:1px solid #ccc;
    position:relative;
    ._tools{
        padding:5px;
        border-bottom:1px solid #ccc;
        background: #fff;
        ul{
            margin:0;
            padding:0;
            list-style:none;
            li{
                float:left;
                a{
                    display:inline-block;
                    border:1px solid #dadada;
                    font-size:12px;
                    padding:3px;
                    margin-right:1px;
                    width:12px;
                    height:12px;
                    text-align: center;
                    background: #f4f4f4;
background: -moz-linear-gradient(top,  #f4f4f4 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e8e8e8));
background: -webkit-linear-gradient(top,  #f4f4f4 0%,#e8e8e8 100%);
background: -o-linear-gradient(top,  #f4f4f4 0%,#e8e8e8 100%);
background: -ms-linear-gradient(top,  #f4f4f4 0%,#e8e8e8 100%);
background: linear-gradient(to bottom,  #f4f4f4 0%,#e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e8e8e8',GradientType=0 );

                    cursor:pointer;
                    &:hover,&.active{
                        background:#333;
                            color:white;
                    }
                        
                }
            }
        }
        &:after{
            content:"";
            clear:both;
            display:table;
        }
    }
    ._editor{
        min-height:300px;
        display:block;
        background:#fff;
        position:relative;
        iframe{
            position:absolute;
            width:100%;
            height:100%;
            border:0px;
        }
    }
}

JavaScript

(function(window, $, document, undefined){
    //"use strict";
    $.fn.richtext = function(){
        var template = ['<div class="_richtext">',
                        '<div class="_tools">',
                        '</div>',
                        '<div class="_editor">',
                        '<iframe></iframe>',
                        '</div>',
                        '</div>'].join('');
        $(this).each(function(index, element){
            var COMMAND = {
                BOLD:['bold','fa-bold'],
                ITALIC:['italic','fa-italic'],
                UNDERLINE: ['underline','fa-underline'],
                
                //BACKGROUND_COLOR:['backColor','fa-tint'],
                //COPY:['copy','fa-copy'],
                LINK: ['createLink','fa-chain'],
                UNLINK: ['unlink','fa-chain-broken'],
                //CUT:['cut','fa-scissors'],
                FONTNAME:['fontName','fa-plus'],
                DELETE: ['delete','fa-eraser'],
                //COLOR: ['foreColor','fa-paint-brush'],
                UNDO: ['undo', 'fa-undo'],
                REDO: ['redo','fa-repeat'],
                //PASTE: ['paste','fa-paste']
            };
            
            //init
            element = $(element);
            element.hide();
            
            var editorTemplate = $(template),
                tools = editorTemplate.find('._tools');
            
            editorTemplate.insertAfter(element);
            //editor.prop('contenteditable','true');
            var editorWindow = editorTemplate.find('iframe')[0].contentWindow,
                editor = editorWindow.document;
            editor.designMode = 'on';
            
            var toolTemplate = ['<ul>','</ul>'];
            for(k in COMMAND){
                var cmd = COMMAND[k];
                var eTemplate = '';
                switch(cmd[0]){
                    case 'fontName':
                        eTemplate = '<select command="'+cmd[0]+'"><option...