JSFiddle - React, Tailwind, and code Playground

by spadez

HTML

<form style="border:1px #bbb solid;padding:1em;">
    <textarea name="description" id="id_description" class="rte-zone" height="150">jQuery RTE 1</textarea>
    <input type="submit" />
</form>

CSS

.frameBody {
    font-family:sans-serif;
    font-size:12px;
    margin:0;
    width:100%;
    height:100%;
}
.rte-zone {
    width:450px;
    margin:0px 0px 0px 0px;
    padding:0px;
    height:175px;
    border:1px #999 solid;
    clear: both;
}
.rte-toolbar {
    overflow:hidden;
}
.rte-toolbar a, .rte-toolbar a img {
    border:0;
}
.rte-toolbar p {
    float:left;
    border:1px;
    margin-bottom:5px;
    padding-right:5px;
}

JavaScript

/*
 * WYSIWYG EDITOR BASED ON JQUERY RTE
 */

// define the rte light plugin
(function ($) {

    if (typeof $.fn.rte === "undefined") {

        var defaults = {
            content_css_url: "rte.css",
            dot_net_button_class: null,
            max_height: 350
        };

        $.fn.rte = function (options) {

            $.fn.rte.html = function (iframe) {
                return iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML;
            };

            // build main options before element iteration
            var opts = $.extend(defaults, options);

            // iterate and construct the RTEs
            return this.each(function () {
                var textarea = $(this);
                var iframe;
                var element_id = textarea.attr("id");

                // enable design mode
                function enableDesignMode() {

                    var content = textarea.val();

                    // Mozilla needs this to display caret
                    if ($.trim(content) === '') {
                        content = '<br />';
                    }

                    // already created? show/hide
                    if (iframe) {
                        console.log("already created");
                        textarea.hide();
                        $(iframe).contents().find("body").html(content);
                        $(iframe).show();
                        $("#toolbar-" + element_id).remove();
                        textarea.before(toolbar());
                        return true;
                    }

                    // for compatibility reasons, need to be created this way
                    iframe = document.createElement("iframe");
                    iframe.frameBorder = 0;
                    iframe.frameMargin = 0;
                    iframe.framePadding = 0;
                    iframe.height = 200;
                    if (textarea.attr('class')) iframe.className = textarea.attr('class');
 ...