如何在自定义弹出窗口中添加“插入/编辑链接”按钮?

时间:2016-08-04 作者:Achillx

我需要在文章的正文中插入一些文本,通过将其包装在一些带有自定义类的div标记中,将其转换为“side标记”。

我在tinymce中创建了一个自定义按钮,它会弹出一个带有文本字段的新窗口。您编写文本,当您点击OK时,它会添加开始和结束div标记,并将其插入光标所在的wp编辑器中。

代码如下:

(function () {
    tinymce.PluginManager.add(\'custom_mce_button2\', function(editor, url) {
        editor.addButton(\'custom_mce_button2\', {
            icon: false,
            text: \'Side Tag\',
            onclick: function (e) {
                editor.windowManager.open( {
                    title: \'Insert a Sidetag\',
                    body: [{
                        type: \'textbox\',
                        name: \'title\',
                        placeholder: \'Type the side tag content here.\',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 50,
                    },
                    {
                        type: \'button\',
                        name: \'link\',
                        text: \'Insert/Edit link\',
                        onclick: function( e ) {
                            //get the Wordpess\' "Insert/edit link" popup window.
                        },
                    }],
                    onsubmit: function( e ) {
                        editor.insertContent( \'<div class="side-tag-wrap hidden-xs"><div class="side-tag">\' + e.data.title + \'</div></div>\');
                    }
                });
            }
        });
    });
})();
以及它的作用:

enter image description here

到目前为止一切正常,但。。。我还希望能够在弹出窗口仍然打开时添加链接,这正是默认编辑器的“插入/编辑链接”按钮的工作方式。我知道如何使用tinymce的链接插件,但这没有帮助。我主要想链接已经发布的帖子,所以我需要:

enter image description here

有没有办法在自定义弹出窗口中调用此按钮或调用quicktags功能?

1 个回复
最合适的回答,由SO网友:Achillx 整理而成

所以我要回答我自己的问题,对于那些面临或将面临同样问题的人。

我添加了两个按钮。打开wordpress的内置窗口,选择一篇文章并插入链接。另一个打开wordpress的内置媒体窗口以选择图像。这就是你最终得到的结果。

enter image description here

您需要在一个单独的文件中包含两个PHP函数和一个JS函数。在函数中。php,或在任何有自定义函数的地方添加以下内容:

/**
 * Add a custom button to tinymce editor
 */
function custom_mce_buttons() {
    // Check if WYSIWYG is enabled
    if ( get_user_option( \'rich_editing\' ) == \'true\' ) {
        add_filter( \'mce_external_plugins\', \'custom_tinymce_plugin\' );
        add_filter( \'mce_buttons\', \'register_mce_buttons\' );
    }
}
add_action(\'admin_head\', \'custom_mce_buttons\');


// Add the path to the js file with the custom button function
function custom_tinymce_plugin( $plugin_array ) {
    $plugin_array[\'custom_mce_button1\'] = get_template_directory_uri() .\'PATH_TO_THE_JS_FILE\';
    $plugin_array[\'custom_mce_button2\'] = get_template_directory_uri() .\'PATH_TO_THE_OTHER_JS_FILE\';
    return $plugin_array;
}

// Register and add new button in the editor
function register_mce_buttons( $buttons ) {
    array_push( $buttons, \'custom_mce_button1\' );
    array_push( $buttons, \'custom_mce_button2\' );
    return $buttons;
}
和JS文件。

(function () {
    tinymce.PluginManager.add(\'custom_mce_button1\', function(editor, url) {
        editor.addButton(\'custom_mce_button1\', {
            icon: false,
            text: \'THE_TEXT_OF_THE_BUTTON\',
            onclick: function (e) {
                editor.windowManager.open( {
                    title: \'THE_TITLE_OF_THE_POPUP_WINDOW\',
                    body: [{
                        type: \'textbox\',
                        name: \'title\',
                        placeholder: \'PLACE_HOLDER_TEXT\',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 50,
                    },
                    {
                        type: \'button\',
                        name: \'link\',
                        text: \'Insert/Edit link\',
                        onclick: function( e ) {
                            //get the Wordpess\' "Insert/edit link" popup window.
                            var textareaId = jQuery(\'.mce-custom-textarea\').attr(\'id\');
                            wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance
                            wpLink.open( textareaId ); //open the link popup
                            return false;
                        },
                    },
                    {
                        type: \'button\',
                        name: \'image\',
                        classes: \'sidetag-media-button\',
                        text: \'Insert Media\',
                        onclick: function( e ) {

                            jQuery(function($){
                                // Set all variables to be used in scope
                                var frame;
                                //it has to match the "textareaID" above, because it is the input field that we are
                                //going to insert the data in HTML format.
                                var imgContainer = $( \'.mce-custom-textarea\' );

                                // ADD IMAGE LINK
                                event.preventDefault();

                                // If the media frame already exists, reopen it.
                                if ( frame ) {
                                    frame.open();
                                    return;
                                }

                                // Create a new media frame
                                frame = wp.media({
                                    title: \'Select or Upload Media\',
                                    button: {
                                      text: \'Use this media\'
                                    },
                                    multiple: false  // Set to true to allow multiple files to be selected
                                });

                                // When an image is selected in the media frame...
                                frame.on( \'select\', function() {

                                    // Get media attachment details from the frame state
                                    var attachment = frame.state().get(\'selection\').first().toJSON();

                                    // Send the attachment URL to our custom image input field.
                                    var imageContent = \'<img class="side-tag-image" src="\'+attachment.url+\'" alt="\'+attachment.alt+\'" style="max-width:100%;"/>\'+attachment.caption;
                                    imgContainer.val( imageContent + imgContainer.val() );

                                });
                                // Finally, open the modal on click
                                frame.open();
                        });
                        return false;
                        }
                    }],
                    onsubmit: function( e ) {
                        // wrap it with a div and give it a class name
                        editor.insertContent( \'<div class="CLASS_NAME">\' + e.data.title + \'</div>\');
                    }
                });
            }
        });
    });
})();
我希望这会对你们中的一些人有所帮助。。