JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<textarea rows="20" cols="20" name="content" style="width:100%; height:550px">&lt;h1&gt;Welcome to the TinyMCE editor demo!&lt;/h1&gt; &lt;p&gt;Feel free to try out the different features that are provided, please note that the &lt;b&gt;MoxieManager&lt;/b&gt; specific functionality is part of our commercial offering. The demo is to show the integration.&lt;/p&gt; &lt;h2&gt;Got questions or need help?&lt;/h2&gt; &lt;p&gt;If you have questions or need help, feel free to visit our &lt;a href="../forum/index.php"&gt;community forum&lt;/a&gt;! We also offer Enterprise &lt;a href="../enterprise/support.php"&gt;support&lt;/a&gt; solutions. Also do not miss out on the &lt;a href="../wiki.php"&gt;documentation&lt;/a&gt;, its a great resource wiki for understanding how TinyMCE works and integrates.&lt;/p&gt; &lt;h2&gt;Found a bug?&lt;/h2&gt; &lt;p&gt;If you think you have found a bug, you can use the &lt;a href="../develop/bugtracker.php"&gt;Bug Tracker&lt;/a&gt; to report bugs to the developers.&lt;/p&gt; &lt;p&gt;And here is a simple table for you to play with.&lt;/p&gt; &lt;table border="0"&gt;&lt;tbody&gt;&lt;tr&gt; &lt;td&gt;&lt;strong&gt;Product&lt;/strong&gt;&lt;/td&gt; &lt;td&gt;&lt;strong&gt;Cost&lt;/strong&gt;&lt;/td&gt; &lt;td&gt;&lt;strong&gt;Really?&lt;/strong&gt;&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td&gt;TinyMCE&lt;/td&gt; &lt;td&gt;Free&lt;/td&gt; &lt;td&gt;YES!&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td&gt;Plupload&lt;/td&gt; &lt;td&gt;Free&lt;/td&gt; &lt;td&gt;YES!&lt;/td&gt; &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt; &lt;p&gt;Enjoy our software and create great content!&lt;/p&gt; &lt;p&gt;Oh, and by the way, don't forget to check out our other product called &lt;a href="http://www.plupload.com" target="_blank"&gt;Plupload&lt;/a&gt;, your ultimate upload solution with HTML5 upload support!&lt;/p&gt;</textarea>

JavaScript

// Init TinyMCE core
tinymce.init({
    selector: "textarea",
    theme: "modern",
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [{
        title: 'Test template 1',
        content: 'Test 1'
    }, {
        title: 'Test template 2',
        content: 'Test 2'
    }],
    setup: function (ed) {
        ed.addButton('example', {
            title: 'My title',
            image: 'http://placehold.it/16x16',
            onclick: function () {
                ed.insertContent('Hello world!!');
            }
        });
    }
});