TinyMCE API v4 windowManager.open - Какие виджеты можно настроить для опции body?

Ответ 1

После того, как я украсил минитипированную версию tinymce, я обнаружил, что это могут быть некоторые типы тела для windowManager.open. Я не уверен, как использовать их все, так как вся эта информация была собрана путем проб и ошибок. Поскольку документация действительно плохая, никакой реальной информации не может быть собрана. Также здесь ссылка, которая содержит некоторые полезные сведения о флажке.

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

Мне потребовался час или около того, чтобы проверить и проверить все, поэтому я действительно надеюсь, что это избавит вас от необходимости делать это самостоятельно.

LE: параметры текстового поля: таблица с текстовыми полями https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.textbox/

LE2: вы можете попробовать и просмотреть все упомянутые элементы tinymce.ui. *, указанные ниже, и проверить, есть ли таблица настроек, я думаю, что он может использоваться как действительный параметр для тела, если он есть

LE3: это старая документация http://archive.tinymce.com/wiki.php/api4:index, так как она более полезна, чем новая, она теперь доступна только документация 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'
                }

Ответ 2

Googling для этого вопроса Я нашел ответ:

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

Ответ 3

Я нашел этот способ указания модального тела диалога:

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