JSFiddle - React, Tailwind, and code Playground

by nehalpatel

HTML

<script src="http://www.tinymce.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script src="http://spacebug.com/ipweditor/jquery.ipweditor-1.2.1.js"></script>
<div style="display:none">
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
</div>
<div style="border: solid thin gray; padding:5px;">
    <div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b> 
    </div>
</div>

JavaScript

$(document).ready(function () {
    var ed = new tinymce.Editor('content', {
        mode: "exact",
        theme: "advanced",
        plugins: "emotions,table",
        theme_advanced_toolbar_location: "top",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        table_default_cellspacing: 0,
        table_default_border: 1,
        remove_linebreaks: false
    });

    // ed.render();

    $('.my_text').editable({
        type: 'wysiwyg',
        editor: ed,
        onSubmit: function submitData(content) {
            alert(content.current);
        },
        submit: 'save',
        cancel: 'cancel'
    });
});