วิธีเพิ่มปุ่ม“ แทรก / แก้ไขลิงค์” ในหน้าต่างที่กำหนดเองของ Tinymce ป๊อปอัพ

ฉันจำเป็นต้องแทรกข้อความบางส่วนในเนื้อหาของบทความซึ่งเปลี่ยนเป็น "แท็กด้านข้าง" โดยใส่ไว้ในแท็ก div บางรายการด้วยคลาสที่กำหนดเอง

ฉันได้สร้างปุ่มที่กำหนดเองใน Tinymce ที่ปรากฏขึ้นในหน้าต่างใหม่ที่มีช่องข้อความ คุณเขียนข้อความและเมื่อคุณกด OK จะเป็นการเพิ่มแท็ก div เริ่มต้นและแท็ก 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>');
                    }
                });
            }
        });
    });
})();

และมันทำอะไร:

จนถึงตอนนี้ทุกอย่างใช้งานได้ แต่ ... ฉันยังต้องการที่จะเพิ่มลิงก์ในขณะที่หน้าต่างป๊อปอัปยังคงทำงานอยู่ปุ่มทำงานของปุ่ม "แทรก / แก้ไข" ของตัวแก้ไขค่าเริ่มต้นคืออะไร ฉันรู้วิธีใช้ปลั๊กอินลิงก์ของ tinymce แต่วิธีนี้ไม่ได้ช่วย ฉันต้องการลิงก์โพสต์ที่เผยแพร่เป็นส่วนใหญ่แล้วดังนั้นฉันต้องการสิ่งนี้:

มีวิธีเรียกปุ่มนี้ในหน้าต่างป๊อปอัพที่กำหนดเองของฉันหรือเรียกใช้ฟังก์ชั่น quicktags หรือไม่?

ดังนั้นฉันจึงตอบคำถามของฉันเองสำหรับผู้ที่เผชิญหรือจะเผชิญกับปัญหาเดียวกัน

ฉันได้เพิ่มสองปุ่ม หนึ่งเปิดหน้าต่าง build-in ของ wordpress เพื่อเลือกโพสต์และแทรกลิงค์ อีกอันหนึ่งจะเปิดหน้าต่างสื่อในตัวของ wordpress เพื่อเลือกรูปภาพ นั่นคือสิ่งที่คุณได้ในตอนท้าย

คุณจะต้องการฟังก์ชัน PHP สองฟังก์ชันและหนึ่งฟังก์ชัน JS ในไฟล์แยกต่างหาก ใน functions.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>');
                    }
                });
            }
        });
    });
})();

ฉันหวังว่านี่จะช่วยให้คุณบางคน ..