Как добавить кнопку «Вставить / Изменить ссылку» в пользовательском всплывающем окне tinymce?

Мне нужно вставить в текст текст текст, который превращается в «боковой тег», обертывая его внутри некоторых тегов div с помощью пользовательских классов.

Я создал пользовательскую кнопку в tinymce, которая всплывает в новом окне с текстовым полем. Вы пишете текст, и когда вы нажимаете «ОК», он добавляет теги начала и endig 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?

Solutions Collecting From Web of "Как добавить кнопку «Вставить / Изменить ссылку» в пользовательском всплывающем окне tinymce?"

Поэтому я отвечаю на свой вопрос, для тех, кто сталкивается или сталкивается с той же проблемой.

Я добавил две кнопки. В открывшемся окне 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>'); } }); } }); }); })(); 

Надеюсь, это поможет некоторым из вас.