it-swarm.dev

TinyMCE API v4 windowManager.open - Quais widgets posso configurar para a opção body?

Gostaria de preencher o corpo de uma caixa de diálogo modal com HTML personalizado, gerado por Javascript.

O documentação para este método está quase vazio.

Encontrei apenas exemplos para

Existe uma documentação para os tipos disponíveis? Mais especificamente, existe um tipo para adicionar marcação geral ao corpo de um diálogo a partir de uma variável Javascript?

38
Olav

Depois de embelezar a versão minificada do tinymce, descobri que esses podem ser alguns dos tipos de corpo para windowManager.open. Não sei como usá-los, pois todas essas informações foram coletadas por tentativa e falha. Como a documentação é realmente ruim, nenhuma informação real pode ser obtida. Também aqui está um link que inclui algumas boas informações na caixa de seleção.

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

Levei uma hora ou mais para verificar e testar tudo, então eu realmente espero que isso poupe o trabalho de fazer você mesmo.

LE: parâmetros de caixa de texto: tabela de configurações de caixa de texto https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.textbox/

LE2: você pode tentar procurar todos os elementos tinymce.ui. * Mencionados abaixo e verificar se há uma tabela de configurações, acho que pode ser usado como um parâmetro válido para o corpo, se houver.

LE3: esta é a documentação antiga http://archive.tinymce.com/wiki.php/api4:index , pois é mais útil do que a nova é a única documentação disponível agora 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

102
Mujnoi Gyula Tamas

Pesquisa no Google para esta pergunta eu encontrei ma resposta :

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

Eu encontrei esta maneira de especificar o corpo de 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();
        }
    }]
});
2
naXa