44

I would like to fill the body of a modal dialog with custom HTML, generated by Javascript.

The documentation for this method is mostly empty.

I have only found examples for

Is there a documentation for the available types? More specifically, is there a type to add general markup to the body of a dialog from a Javascript variable?

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
Olav
  • 1,602
  • 2
  • 16
  • 21

3 Answers3

120

After I beautified the minified version of tinymce, i found that these may be some of the body types for windowManager.open. I'm not sure how to use them all, as all this info was gathered through trial and fail. Since the documentation is really bad, no real info can be gathered. Also here's a link which includes some good info on checkbox.

https://wordpress.stackexchange.com/questions/172853/how-disable-checkbox-when-listbox-value-changes-in-tinymce

It took me an hour or so to check and test all so I really hope this will save you the trouble of doing it yourself.

LE: textbox params: textbox settings table

https://www.tiny.cloud/docs-4x/api/tinymce.ui/tinymce.ui.textbox/

LE2: you can try and browse all the tinymce.ui.* elements mentioned down and check if it has a settings table, I think it may be used as a valid parameter for body if they have it

LE3: this is the old documentation http://archive.tinymce.com/wiki.php/api4:index, since it's more useful than the new one it's the only documentation available now https://www.tinymce.com/docs/api/

                {
                    type   : 'listbox',
                    name   : 'listbox',
                    label  : 'listbox',
                    values : [
                        { text: 'Test1', value: 'test1' },
                        { text: 'Test2', value: 'test2' },
                        { text: 'Test3', value: 'test3' }
                    ],
                    value : 'test2' // Sets the default
                },
                {
                    type   : 'combobox',
                    name   : 'combobox',
                    label  : 'combobox',
                    values : [
                        { text: 'Test', value: 'test' },
                        { text: 'Test2', value: 'test2' }
                    ]
                },
                {
                    type   : 'textbox',
                    name   : 'textbox',
                    label  : 'textbox',
                    tooltip: 'Some nice tooltip to use',
                    value  : 'default value'
                },
                {
                    type   : 'container',
                    name   : 'container',
                    label  : 'container',
                    html   : '<h1>container<h1> is <i>ANY</i> html i guess...<br/><br/><pre>but needs some styling?!?</pre>'
                },
                {
                    type   : 'tooltip',
                    name   : 'tooltip',
                    label  : 'tooltip ( you dont use it like this check textbox params )'
                },
                {
                    type   : 'button',
                    name   : 'button',
                    label  : 'button ( i dont know the other params )',
                    text   : 'My Button'
                },
                {
                    type   : 'buttongroup',
                    name   : 'buttongroup',
                    label  : 'buttongroup ( i dont know the other params )',
                    items  : [
                        { text: 'Button 1', value: 'button1' },
                        { text: 'Button 2', value: 'button2' }
                    ]
                },
                {
                    type   : 'checkbox',
                    name   : 'checkbox',
                    label  : 'checkbox ( it doesn`t seem to accept more than 1 )',
                    text   : 'My Checkbox',
                    checked : true
                },
                {
                    type   : 'colorbox',
                    name   : 'colorbox',
                    label  : 'colorbox ( i have no idea how it works )',
                    // text   : '#fff',
                    values : [
                        { text: 'White', value: '#fff' },
                        { text: 'Black', value: '#000' }
                    ]
                },
                {
                    type   : 'panelbutton',
                    name   : 'panelbutton',
                    label  : 'panelbutton ( adds active state class to it,visible only on hover )',
                    text   : 'My Panel Button'
                },
                {
                    type   : 'colorbutton',
                    name   : 'colorbutton',
                    label  : 'colorbutton ( no idea... )',
                    // text   : 'My colorbutton'
                },
                {
                    type   : 'colorpicker',
                    name   : 'colorpicker',
                    label  : 'colorpicker'
                },
                {
                    type   : 'radio',
                    name   : 'radio',
                    label  : 'radio ( defaults to checkbox, or i`m missing something )',
                    text   : 'My Radio Button'
                }

Tinymce Body Types Displayed

Revious
  • 7,816
  • 31
  • 98
  • 147
Mujnoi Gyula Tamas
  • 1,759
  • 1
  • 12
  • 13
  • 33
    tinymce documentation, to put it nicely, sucks. thanks for this. FYI, `textbox` accepts the attribute `multiline:true` which will allow it to act like a `textarea` – chiliNUT Jun 08 '15 at 17:21
  • 4
    Lifesaver! Why can't tinyMCE carry this kind of info? – And Finally Jul 28 '15 at 08:24
  • Did you ever figure out how to make radio buttons behave like radio buttons instead of checkboxes? – Paul Schreiber Oct 24 '15 at 18:14
  • Well not really. I found a similar question on SO http://stackoverflow.com/questions/19607598/radio-buttons-acts-as-check-box-in-tinymce-4 . It stats that the radio class of tinymce is just an empty placeholder which I sad previously, it defaults to checkbox. A workaround for that in the answers is to use a button group. I wrote a start up test plugin, from which you may build up. Basically the idea is to have equal number of checkboxes as buttons and have the checkboxes be hidden, while manipulating them from inside the button group individual buttons. http://fiddle.tinymce.com/Pgfaab – Mujnoi Gyula Tamas Oct 25 '15 at 20:54
  • or via listbox as suggested in the same questions answers. also please not that using the same name doesn't work. http://fiddle.tinymce.com/Pgfaab/2 – Mujnoi Gyula Tamas Oct 25 '15 at 20:58
  • 4
    I created a fiddle with available widgets and layouts for containers : https://jsfiddle.net/aeutaoLf/ – Gagaro Mar 29 '16 at 09:46
  • 1
    good example. also as a side note the current documentation is even worse that before. oh and the checked parameter isn't working for some reason anymore, on listbox and combobox. – Mujnoi Gyula Tamas Mar 29 '16 at 12:00
  • 7
    I went ahead and wrote an article listing the different widgets and containers layout available: http://makina-corpus.com/blog/metier/2016/how-to-create-a-custom-dialog-in-tinymce-4 – Gagaro Mar 30 '16 at 09:20
  • You can also add `classes: 'myClassname',` to your elements in the `body` and your button/input/etc. will have that class name :) Your elements will then have `mce-myClassname` class – dingo_d Jun 01 '16 at 12:14
  • You can practically use all of the settings they provide for their ui elements. For example: http://archive.tinymce.com/wiki.php/api4:class.tinymce.ui.TextBox Their documentation is just not that well structured... – Fyn Aug 29 '16 at 10:10
  • Yes, that was the problem, unclear information. Their new docs looks more promising from what I saw today, but when I last updated this answear the new docs was even worse. – Mujnoi Gyula Tamas Aug 29 '16 at 17:16
  • 1
    The docs are still really lacking. Why can't they simply list the arguments/parameters you can use with this? One example would save a lot of time. I guess this is not intended to be a replacement for the actual editor, but if you have space constraints it's the easiest way to put the editor in a modal. – Alison Dec 01 '17 at 18:28
  • 1
    there is more information here than the whole "tinymce.ui.containers" page. it's basically an infinite redirect back to itself for usefulness – twig Dec 12 '18 at 05:05
13

Googling for this question I found an answer: 

editor.windowManager.open({
    title: 'My dialog',
    body: [{
        type: 'container',
        html: "Hello world!"
    }]
});
Olav
  • 1,602
  • 2
  • 16
  • 21
  • `theme.min.js:9 Uncaught Error: Errors: Failed path: (dialog > body) Choice schema did not contain choice key: "type"` – Michael Apr 01 '19 at 22:41
3

I've found this way of specifying modal dialog body:

var dialogBody = '<p>Whatever you want here</p>';

editor.windowManager.open({
    title: 'Dialog Title',
    html: dialogBody,
    buttons: [{
        text: 'Do Action',
        subtype: 'primary',
        onclick: function() {
            // TODO: handle primary button click
            (this).parent().parent().close();
        }
    },
    {
        text: 'Close',
        onclick: function() {
            (this).parent().parent().close();
        }
    }]
});
naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259