JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<textarea id="mytextarea">Hello, World!</textarea>
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'...