tinymce 插件 - 如何从多个选项卡中获取数据？答案

【问题标题】：tinymce plugin - how to get data from more than one tab?tinymce 插件 - 如何从多个选项卡中获取数据？
【发布时间】：2016-04-22 08:40:32
【问题描述】：

这里是 javascript 代码。我正在使用bodyType: 'tabpanel'，因为我想要 2 个标签。问题是当onsubmit: function( e ) { console.log(e.data); } 触发时，我只能得到 Object { nameA: "aaa", ageA: "a1" } 的输出。那么如何从 Tab B 中获取数据呢？

(function() {
     /* Register the buttons */
     tinymce.create('tinymce.plugins.MyButtons', {
          init : function(editor, url) {

               editor.addButton('themedropdownbutton', {
                 title : 'My dropdown button',
                 type: 'menubutton',
                 text: 'Theme Shortcodes',
                 menu: [
                       {
                           text: 'Tabs Example',
                           onclick: function() {
                                var win = editor.windowManager.open( {
                                    title: 'Content Tabs',
                                    bodyType: 'tabpanel',
                                    body: [
                                        {
                                            title: 'My Tab A',
                                            type: "form",
                                            items: [
                                                { name: 'nameA', type: 'textbox', label: 'Your Name TAB A' },
                                                { name: 'ageA', type: 'textbox', label: 'Your Age TAB A' },
                                            ]
                                        },
                                        {
                                            title: 'My Tab B',
                                            type: "form",
                                            items: [
                                                { name: 'nameB', type: 'textbox', label: 'Your Name TAB B' },
                                                { name: 'ageB', type: 'textbox', label: 'Your Age TAB B' },
                                            ]
                                        },
                                    ],
                                    onsubmit: function( e ) {
                                        console.log(e.data);   // output only this - Object { nameA: "aaa", ageA: "a1" }
                                                               // where is { nameB: "bbb", ageB: "b1" }  ?????
                                    }
                                });
                            }
                        },
                        {
                            // other functions
                        },
                     ]  // end menu:
               });
          },
          createControl : function(n, cm) {
               return null;
          },
     });

     tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );

})();

【问题讨论】：

标签： javascript tinymce-4 tinymce-plugins

【解决方案1】：

好的，终于找到答案了，如果你有同样的问题，用这个

onsubmit: function( e ) {
    var alldata = win.toJSON();
    console.log(JSON.stringify(alldata));  // just for testing, you don't need this line
    // You can then access the results with this example
    editor.insertContent('Tab A name is ' + alldata.nameA + '; Tab B name is ' +  alldata.nameB);
    editor.insertContent('Tab A age is ' + alldata.ageA + '; Tab B age is ' +  alldata.ageB);
}

在http://community.tinymce.com/forum/viewtopic.php?id=33852找到参考

【讨论】：

【解决方案2】：

我找到了其他更好的解决方案（对我来说）。而不是

...
bodyType: 'tabpanel',
body: [...]
...

你可以在body里面做tabpanel。它应该看起来像这样：（我简化了您的示例，并在提交和插入一些内容时制作警报完整数据）

(...)
editor.windowManager.open({

            title: 'Content Tabs',
              //bodyType: 'tabpanel', <- delete this
              body: [
                {type: 'container', label:'My all tabs'}, //it's not necessary, but shows, that other things can be there
                {
                  title: 'Tabpanels',
                  type: 'tabpanel',                    
                  items: [ 
                      {
                        title: 'My Tab A',
                        type: "form",
                        items: [
                            {name: 'nameA', type: 'textbox',
                            label: 'Your Name TAB A' },
                            { name: 'ageA', type: 'textbox',
                            label: 'Your Age TAB A' }
                        ]
                      },
                      {
                        title: 'My Tab B',
                        type: "form",
                        items: [
                            { name: 'nameB', type: 'textbox',
                            label: 'Your Name TAB B' },
                            { name: 'ageB', type: 'textbox',
                            label: 'Your Age TAB B' }
                        ]
                      }
                  ]
                }
              ],
              onsubmit: function(e) {
               editor.selection.setContent('[Tested menu');
               editor.insertContent(' TabA name: ' + e.data.nameA);
               editor.insertContent(", TabB name: " + e.data.nameB +']');
               alert(e.data.toSource());
              }

        }
...

我为此制作了一个 TinyMceFiddle：http://fiddle.tinymce.com/0Wfaab/1。（抱歉，我没有在你的答案下添加评论，但我还不能这样做。我发现 console.log 不能很好地与 TinyMce 配合使用 - 但警报会显示对象。）

【讨论】：

【解决方案3】：

您可以使用以下代码来简单地从所有选项卡中获取所有字段

onsubmit: function (b) {

    var win = b.control.rootControl;
    alert( JSON.stringify( win.toJSON() ) );
    
}

【讨论】：