JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<div class='container'>
    <div class='wrapper'>
        <div class='content'>
            <div class="tom-text"></div>
        </div>
    </div>
</div>

CSS

.wrapper {
    margin: auto;
    width: auto;
}

.content {
    width:300px;
}

JavaScript

function TextEditor(name) {
    if ( arguments.callee._singletonInstance )
        return arguments.callee._singletonInstance;
    arguments.callee._singletonInstance = this;
        
    this.init = function() {
        console.log('init');
    }
    
    this.init();       
    
    var element = {};
    this.setElement = function(elem) {
        element = elem;
    }
    
    this.showEditor = function() {
        console.log(element.html());
    }
}



(function($) {
    $.fn.editable = function(opts) {
        var DATA_OPTIONS = 'editable-options',
            defaults = {                
                type: 'text',
                editor: {}
            },
            $this = this;
          
        function init(obj, options) {                        
            if(options.type == 'text')
                options.editor = new TextEditor();
                
            $(obj).data(DATA_OPTIONS, options);
        }        

        this.options = function() {
            return $this.data(DATA_OPTIONS);
        };
        
        this.container = function () {
            return $this.find('.tom-' + $this.options().type);
        }

        this.content = function (_content) {
            if (_content != undefined) {
                $this.container().html(_content);
            }
            else {
                return $this.container().html();
            }
        }

        this.editor = function () {            
            return $this.options().editor;
        }
        
        this.edit = function() {
            $this.editor().setElement($this);
            $this.editor().showEditor();
        }

        if (typeof (opts) === 'object') {            
            return this.each(function () {
                init(this, $.extend(defaults, opts));
            });
        }

        if (typeof (opts) === "string") {
            
            var args = Array.prototype.slice.call(arguments, 1);
            return $this[opts].apply(undefined, args);
...