web-dev-qa-db-ja.com

TinyMCE API v4 windowManager.open-bodyオプションにはどのウィジェットを設定できますか？

モーダルダイアログの本文を、Javascriptによって生成されたカスタムHTMLで埋めたいと思います。

このメソッドのドキュメント はほとんど空です。

の例を見つけただけです

利用可能なタイプのドキュメントはありますか？より具体的には、Javascript変数からダイアログの本文に一般的なマークアップを追加するタイプはありますか？

modal-dialogdhtmltinymce-4
38
Olav

Tinymceの縮小バージョンを美しくした後、これらがwindowManager.openのボディタイプの一部である可能性があることがわかりました。これらすべての情報は試行錯誤で収集されたため、それらをすべて使用する方法がわかりません。ドキュメントは本当に悪いので、実際の情報は収集できません。また、チェックボックスに関するいくつかの良い情報を含むリンクがあります。

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

すべてを確認してテストするのに1時間ほどかかったので、これで自分でやる手間が省けることを願っています。

LE：テキストボックスパラメーター：テキストボックス設定テーブル https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.textbox/

LE2：言及したすべてのtinymce.ui。*要素を参照して、設定テーブルがあるかどうかを確認できます。設定テーブルがある場合は、bodyの有効なパラメーターとして使用できると思います

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

102
Mujnoi Gyula Tamas

グーグル この質問に対して私が見つけた 回答 ：

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

モーダルダイアログ本文を指定するこの方法を見つけました。

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