wordpress - WordPress 可视化编辑器的自定义对话框

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

Well, you open a new window. So adressing the document from which you opened it is not a problem - it is window.opener . You will need to use a onchangeHandler on your select-element and use the value of the option you selected. Once you got it you will have to use the following code:

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

Answer 2

我在我的 Browser Shots 插件中使用以下代码，我认为它或多或少是您正在寻找的。

/**
 * 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);
    }
})();