JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<div id="tinymodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <textarea id="mytextarea">Hello, World!</textarea>
  </div>
</div>


<button type="button" class="btn" data-toggle="modal" data-target="tinymodal">
  Modal with Editor
</button>

CSS

* {
    box-sizing: border-box;
}

JavaScript

tinymce.PluginManager.add('test_widgets',function(editor,url){
	editor.addButton('test_widgets',{
		title: 'Widgets',
		text: 'Widgets',
		onclick: function(){
			editor.windowManager.open({
				title: 'Test Widgets',
				body: [
        {
          type   : 'listbox',
          name   : 'listbox',
          label  : 'listbox',
          values : [
            { text: 'Test', value: 'test' },
            { text: 'Test2', value: 'test2', selected: true }
          ]
        },
          {
            type   : 'combobox',
            name   : 'combobox',
            label  : 'combobox',
            items : ['Test', 'Test 2']
          },
          {
            type   : 'selectbox',
            name   : 'selectbox',
            label  : 'selectbox',
            options : [
              { text: 'Test', value: 'test' },
              { text: 'Test2', value: 'test2' }
            ]
          },
          {
            type   : 'textbox',
            name   : 'textbox',
            label  : 'textbox',
            tooltip: 'Some nice tooltip to use',
            value  : 'default value'
          },
          {
            type   : 'textbox',
            name   : 'textbox multiline',
            label  : 'textbox multiline',
            multiline : true,
            value  : 'default value\non another line'
          },
          {
            type   : 'tooltip',
            name   : 'tooltip',
            label  : 'tooltip',
            text   : 'Tooltip'
          },
          {
            type   : 'button',
            name   : 'button',
            label  : 'button',
            text   : 'My Button',
            onclick: function(e) {alert('Click')}
          },
          {
            type   : 'buttongroup',
            name   : 'buttongroup',
            label  : 'buttongroup',
            items  : [
              { text: 'Button 1', value: 'button1', onclick: function(e) {alert('Click')} },
              { text: 'Button 2', value: 'button2', tooltip: 'A button'...