¿Cómo agregar el botón "Insertar / Editar enlace" en la ventana personalizada de ventanas emergentes?

10

Necesito insertar un texto en el cuerpo del artículo, que se convierte en una "etiqueta lateral" al encerrarlo dentro de algunas etiquetas div con clases personalizadas.

He creado un botón personalizado en tinymce que abre una nueva ventana con un campo de texto. Usted escribe el texto y cuando presiona OK, agrega las etiquetas de inicio y finalización div y lo inserta en el editor de wp donde estaba el cursor.

Aquí está el código:

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

Y lo que hace:

Hastaahoratodofunciona,pero...Tambiénquieropoderagregarenlacesmientraslaventanaemergenteaúnestáactivada,exactamentecómofuncionaelbotón"Insertar / Editar enlace" del editor predeterminado. Sé cómo usar el complemento de enlace de Tinymce pero esto no ayuda. Principalmente quiero vincular publicaciones que ya están publicadas, así que necesito esto:

¿Hay alguna forma de llamar a este botón en mi ventana emergente personalizada o llamar a la función de etiquetas rápidas?

    
pregunta Achillx 04.08.2016 - 18:25

1 respuesta

10

Entonces, estoy respondiendo mi propia pregunta, para aquellos que enfrentan o enfrentarán el mismo problema.

He añadido dos botones. Uno abre la ventana incorporada de wordpress para seleccionar una publicación e inserta el enlace. La otra abre la ventana de medios incorporados de wordpress para seleccionar una imagen. Eso es lo que de alguna manera obtienes al final.

NecesitarádosfuncionesPHPyunaJSenunarchivoseparado.Enelarchivofunctions.php,odondeseaquetengasusfuncionespersonalizadas,agreguelosiguiente:

/***Addacustombuttontotinymceeditor*/functioncustom_mce_buttons(){//CheckifWYSIWYGisenabledif(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');//Addthepathtothejsfilewiththecustombuttonfunctionfunctioncustom_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;}//Registerandaddnewbuttonintheeditorfunctionregister_mce_buttons($buttons){array_push($buttons,'custom_mce_button1');array_push($buttons,'custom_mce_button2');return$buttons;}

YelarchivoJS.

(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/Editlink',onclick:function(e){//gettheWordpess'"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>');
                    }
                });
            }
        });
    });
})();

Espero que esto ayude a algunos de ustedes ...

    
respondido por el Achillx 07.02.2017 - 18:37

Lea otras preguntas en las etiquetas