Question

我试图在WordPress可视化编辑器中添加一个按钮，该按钮将弹出一个对话框，让用户选择一些选项，然后单击一个按钮，根据这些选项插入一些内容。

我已经能够通过将其添加到我的功能中来启动对话框：

    <?php
    function fp_plugin_function_callback() { ?>
    <p><select name="my_dialog_options">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select></p>
            <p><input type="submit" class="button-primary" value="Go" /></p>        
    <?php }

    add_action('wp_ajax_fp_plugin_function', 'fp_plugin_function_callback');
    ?>

用这个javascript：

   (function() {
    tinymce.create('tinymce.plugins.fp_split_content', {
        init : function(ed, url) {
            ed.addButton('fp_split_content', {
                title : 'Insert Split Content',
                image : url+'/images/split.png',
                onclick : function() {
                    ed.windowManager.open({
                        file: ajaxurl + '?action=fp_plugin_function',
                        width : 400 + parseInt(ed.getLang('highlight.delta_width', 0)),
                        height : 400 + parseInt(ed.getLang('highlight.delta_height', 0))
                        });
                    var content = ed.selection.getContent({format : 'html'});
                        ed.execCommand('mceInsertContent', false, content);
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('fp_split_content', tinymce.plugins.fp_split_content);
})();

我能找到的答案是如何将用户选择的选项导入可视化编辑器。

Answer 1

好吧，你打开一个新窗口。因此，解决您打开它的文档不是问题 - 它是window.opener。您需要在select元素上使用onchangeHandler并使用所选选项的值。一旦你得到它，你将不得不使用以下代码：

// value is the value of the selected element
window.opener.tinymce.get('your_editor_id').execCommand('mceInsertContent', false, value);

Answer 2

我在浏览器镜头插件中使用以下代码，我认为它或多或少都是您正在寻找的。

/**
 * TinyMCE Integration
 */

(function () {
    "use strict";
    if (typeof (tinymce) != "undefined") {
        tinymce.create('tinymce.plugins.browsershots', {
            init: function (ed, url) {
                ed.addButton('browsershots', {
                    title: 'Browser Shots',
                    image: url.replace('/js', '/images') + '/browsershots-icon.png',
                    onclick: function () {

                        // Dialog prompt's
                        var width = prompt("Screenshot width:", "600");
                        var height = prompt("Screenshot height:", "450");
                        var website = prompt("What's the URL of the website?", "http://www.kevinleary.net");

                        // Build shortcode tag
                        if (website !== null && website !== '') {
                            var shortcode = '[browser-shot url="' + website + '"';
                            if (width !== null && width !== '') {
                                shortcode += ' width="' + width + '"';
                            } else if (height !== null && height !== '') {
                                shortcode += ' height="' + height + '"';
                            }
                            shortcode += ']';
                            ed.execCommand('mceInsertContent', false, shortcode);
                        }
                    }
                });
            },
            createControl: function () {
                return null;
            },
            getInfo: function () {
                return {
                    longname: "Browser Shots",
                    author: 'Kevin Leary',
                    authorurl: 'http://www.kevinleary.net',
                    infourl: 'http://wordpress.org/extend/plugins/browser-shots/',
                    version: "1.2"
                };
            }
        });
        tinymce.PluginManager.add('browsershots', tinymce.plugins.browsershots);
    }
})();

WordPress Visual Editor的自定义对话框

2 个答案: