modal dialog - TinyMCE API v4 windowManager.open-¿Qué widgets puedo configurar para la opción de cuerpo?

modal-dialog dhtml

Question

Me gustaría completar el cuerpo de un diálogo modal con HTML personalizado, generado por Javascript.

La documentación para este método está en su mayoría vacía.

Solo he encontrado ejemplos para

• cargando un archivo externo o
• agregando un cuadro de texto .

¿Hay documentación para los tipos disponibles? Más específicamente, ¿hay algún tipo para agregar marcas generales al cuerpo de un diálogo de una variable Javascript?

Answer 1

Después de embellecer la versión miniaturizada de tinymce, descubrí que estos pueden ser algunos de los tipos de cuerpo para windowManager.open. No estoy seguro de cómo usarlos todos, ya que toda esta información se recopiló mediante prueba y error. Dado que la documentación es realmente mala, no se puede recopilar información real. También aquí hay un enlace que incluye buena información en la casilla de verificación.

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

Me llevó aproximadamente una hora comprobar y probar todo, así que realmente espero que esto te ahorre la molestia de hacerlo tú mismo.

LE: textbox params: tabla de configuración de cuadro de texto https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.textbox/

LE2: puedes probar y explorar todos los elementos de tinymce.ui. * Mencionados y verificar si tiene una tabla de configuraciones, creo que se puede usar como un parámetro válido para el cuerpo si lo tienen

LE3: esta es la documentación anterior http://archive.tinymce.com/wiki.php/api4:index , ya que es más útil que la nueva , es la única documentación disponible ahora 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''
                }

Answer 2

He encontrado esta forma de especificar el cuerpo del diálogo modal:

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();
        }
    }]
});

Answer 3

Googling en Googling para esta pregunta, encontré una respuesta :

editor.windowManager.open({
    title: ''My dialog'',
    body: [{
        type: ''container'',
        html: "Hello world!"
    }]
});