Jak dodać przycisk „Wstaw / Edytuj link” w niestandardowym wyskakującym oknie tinymce?

Muszę wstawić tekst w treści artykułu, który zamienia się w „boczny znacznik”, owijając go wewnątrz tagów div niestandardowymi klasami.

Stworzyłem niestandardowy przycisk w tinymce, który wyskakuje w nowym oknie z polem tekstowym. Piszesz tekst, a gdy naciśniesz OK, dodaje on znaczniki div początku i końca i wstawia do edytora wp, w którym znajdował się kursor.

Oto kod:

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

I co robi:

Do tej pory wszystko działa, ale ... Chcę również móc dodawać linki, gdy okno wyskakujące jest nadal włączone, dokładnie tak, jak działa przycisk „Wstaw / Edytuj link” w domyślnym edytorze. Wiem, jak korzystać z wtyczki link tinymce, ale to nie pomaga. Chcę głównie łączyć posty, które już zostały opublikowane, więc potrzebuję tego:

Czy istnieje sposób na wywołanie tego przycisku w moim niestandardowym wyskakującym oknie lub wywołanie funkcji szybkich tagów?

Odpowiadam więc na moje pytanie dla tych, którzy napotykają lub napotkają ten sam problem.

Dodałem dwa przyciski. Jeden otwiera okno wbudowane wordpress, aby wybrać post i wstawia link. Drugi otwiera okno multimediów wbudowane w wordpress, aby wybrać obraz. Właśnie to w jakiś sposób dostajesz na końcu.

Będziesz potrzebował dwóch funkcji PHP i jednej JS w osobnym pliku. W pliku functions.php lub w dowolnym miejscu, w którym znajdują się funkcje niestandardowe, dodaj:

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

I plik 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>');
                    }
                });
            }
        });
    });
})();

Mam nadzieję, że to pomoże niektórym z was ...