Tinymce.ui is a simple text component

Question

I use tinymce, trying to expand the plugin to show a dialog with a specific layout:

editor.windowManager.open({ title: 'Title of my dialog', body: [ {type: 'label', text: 'my label'}, { name:'my_input', type: 'textbox'}, // { type: 'text', html:'some content with <b>bold</b> if posilbe!'}, // { type: 'html', value:'<div>with custom formating</div>'} ] } 

I checked the tinymce.ui documentation several times, but I can find a way to add html or a text component to the dialog constructor (for example, the comment line in the example).

I know that there is an option that uses a ready-made html template for dialogue .. but there are also many events and triggers, so using the constructor and .ui components is more suitable for my case.

Answer 1

I used the jQuery UI interface for this, but ran into some problems after TinyMCE 4.0.

I have a TinyMCE plugin that allows people to retrieve a text version of their post in a WordPress editor. Then I will show them what the text is using this:

 var plain_block = { type: 'container', html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>' }; ed.windowManager.open({ title: "Plain Text of This Post", spacing: 10, padding: 10, items: [ plain_block ], buttons: [ { text: "Close", onclick: function() { ed.windowManager.close();} } ] }); 

The end result is a fairly simple dialog box with some HTML and a Close key