Question

我想用Javascript生成的自定义HTML填充模态对话框的主体。

我只找到了

的例子

加载外部文件或
adding a textbox。

是否有可用类型的文档？更具体地说，是否有一种类型可以从Javascript变量向对话框的主体添加常规标记？

Answer 1

在我美化了缩小版本的tinymce后，我发现这些可能是windowManager.open的一些体型。我不知道如何使用它们，因为所有这些信息都是通过试用收集而失败的。由于文档非常糟糕，因此无法收集真实信息。这里还有一个链接，其中包含一些关于复选框的好信息。

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

我花了一个小时左右来检查和测试所有这些，所以我真的希望这样可以省去你自己做的麻烦。

LE：textbox params：文本框设置表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'
                }

Tinymce Body Types Displayed

Answer 2

Googling对于这个问题，我找到了an answer：

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

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

TinyMCE API v4 windowManager.open - 我可以为body选项配置哪些小部件？

3 个答案: