JSFiddle - React, Tailwind, and code Playground

by Firdaus Zailani

HTML

<script src="//cdn.jsdelivr.net/tinymce/3.5.10/jquery.tinymce.js"></script>
<script src="http://www.tinymce.com/js/tinymce_3_x/jscripts/tiny_mce/tiny_mce_gzip.php?js=1"></script>
<textarea class="htmlify"></textarea>

JavaScript

$('textarea.htmlify').tinymce({
    mode: 'textareas',
//    script_url : host + '/js/admin/tinymce/tiny_mce.js',
//    content_css: host + '/css/admin/tiny_mce.css',
    language: false,

    setup: function(editor) {
        $('.showPreview', '#' + editor.id + '_preview').click(function(event) {
            event.preventDefault();
            tinyMCE.execCommand('mceAddControl', false, editor.id);
            $('#'+editor.id + '_preview').css('display', 'none');
        });

        editor.addCommand('showHTML', function(ui, v){
            tinyMCE.execCommand('mceRemoveControl', false, editor.id);
            $('#'+editor.id + '_preview').css('display', 'block');
        });
    },

    theme: function(editor, target) {
        
        var editorContainer = $(target).after(
            '<div>' +
                '<div class="mce-toolbar clearfix">' +
                    '<button class="btn-mce-bold" data-mce-command="bold">Bold</button>' +
                    '<button class="btn-mce-italic" data-mce-command="italic">Italic</button>' +
                    '<button class="btn-mce-underline" data-mce-command="underline">Underline</button>' +
                    '<button class="btn-mce-strikethrough" data-mce-command="strikethrough">Strike Through</button>' +
                    '<button class="btn-mce-justifyleft" data-mce-command="justifyleft">Justify Left</button>' +
                    '<button class="btn-mce-justifycenter" data-mce-command="justifycenter">Justify Center</button>' +
                    '<button class="btn-mce-justifyright" data-mce-command="justifyright">Justify Right</button>' +
                    '<button class="btn-mce-justifyfull" data-mce-command="justifyfull">Justify Full</button>' +
                    '<button class="btn-mce-bullist" data-mce-command="InsertUnorderedList">Bullet List</button>' +
                    '<button class="btn-mce-numlist" data-mce-command="InsertOrderedList">Number List</button>' +
                   ...