在弹出的WordPress微型mce编辑器中添加下拉菜单

时间：2016-09-13 作者：bagpipper

所以我需要在wordpress tiny mce弹出窗口中添加其他字段

我的当前代码

(function () {
tinymce.PluginManager.add(\'aptmce_btn\', function (editor, url) {
    editor.addButton(\'aptmce_btn\', {
        text: \'Add popup\',
        icon: false,
        onclick: function () {
            editor.windowManager.open({
                title: \'Enter Your PopUp Contents\',
                body: [
                    {
                        type: \'textbox\',
                        name: \'textboxName\',
                        label: \'Title\',
                        value: \'\'

                    },

                    {
                        type: \'textbox\',
                        name: \'multilineName\',
                        label: \'Content\',
                        value: \'\',
                        multiline: true,
                        minWidth: 300,
                        minHeight: 100
                    },


                ],
                onsubmit: function (e) {
                    editor.insertContent(\'[show_popup title="\' + e.data.textboxName + \'" content="\' + e.data.multilineName + \'"]\');
                  }
               });
           }
       });
   });
})();
我可以创建一个文本框和一个文本区域。但我在添加以下内容时遇到了问题

一个下拉列表一个复选框一个收音机框我也看了一下this link 但什么都没发生

你们谁能告诉我如何添加所需的字段？

谢谢

2 个回复
SO网友:mlimon

看这里，我认为它足以制作任何类型的带有扩展选项的TinyMCE编辑器按钮，如下拉等

https://www.gavick.com/blog/wordpress-tinymce-custom-buttons

不管怎样，如果我们在弹出窗口中选择下拉菜单、复选框和单选按钮，下面是一个演示。

(function () {
tinymce.PluginManager.add(\'aptmce_btn\', function (editor, url) {
    editor.addButton(\'aptmce_btn\', {
        text: \'Add popup\',
        icon: false,
        onclick: function () {
            editor.windowManager.open({
                title: \'Enter Your PopUp Contents\',
                body: [
                    {
                        type: \'textbox\',
                        name: \'textboxName\',
                        label: \'Title\',
                        value: \'\'

                    },
                    {
                        type: \'textbox\',
                        name: \'multilineName\',
                        label: \'Content\',
                        value: \'\',
                        multiline: true,
                        minWidth: 300,
                        minHeight: 100
                    },
                    {
                        type: \'listbox\', 
                        name: \'timeformat\', 
                        label: \'Time Format\', 
                        \'values\': [
                            {text: \'AM\', value: \'am\'},
                            {text: \'PM\', value: \'pm\'}
                        ]
                    },
                    {
                        type: \'checkbox\',
                        name: \'blank\',
                        label: \'Open link in a new tab\'
                    },
                    {
                        type: \'radio\',
                        name: \'active\',
                        label: \'Active Something\'
                    }


                ],
                onsubmit: function (e) {
                    target = \'\';
                    if(e.data.blank === true) {
                        target += \'newtab="on"\';
                    }
                    editor.insertContent(\'[show_popup  title="\' + e.data.textboxName + \'" content="\' + e.data.multilineName + \'" timeformat="\' + e.data.timeformat + \'" something="\' + e.data.active + \'" \' + target + \' ]\');
                  }
               });
           }
       });
   });
})();
请记住一件事，单选按钮的作用类似于复选框，因为单选按钮尚未完成，请参见此处https://github.com/tinymce/tinymce/blob/ca0f454b9001b9f20aa26349b25f6d839c1a1146/js/tinymce/skins/lightgray/Radio.less

但如果您想要多个单选按钮选项，则可以使用列表框（下拉列表）代替多个单选类型。

希望对你有帮助。

SO网友:David Navia

为了进行简单的数据验证，我花了两天时间与这个小玩意儿斗争，发现了以下好东西：

1-包含Tinymce windowmanager支持的所有字段类型https://jsfiddle.net/aeutaoLf/2/

2.-包含关闭前验证windowmanager数据的方法https://stackoverflow.com/questions/34783759/how-to-validate-tinymce-popup-textbox-value#answer-38765360

希望对你有帮助。

标签： tinymce   小码农  

相关推荐

TinyMCE作为评论编辑器-编码问题

我已经在前端和后端实现了TinyMCE作为我的评论表单，使用了以下代码（来源于这里的一些问题）：// Enable TinyMCE as frontend comment editor for new comments function wpse_64243_comment_editor( $field ) { if (!is_single()) return $field; //only on single post pages. global