Italiano
Română
РусскийCómo agregar el botón "Insertar/Editar enlace" en una ventana emergente personalizada de TinyMCE
Necesito insertar texto en el cuerpo del artículo que se convierta en una "etiqueta lateral" envolviéndolo dentro de etiquetas div con clases personalizadas.
He creado un botón personalizado en TinyMCE que muestra una ventana emergente con un campo de texto. Escribes el texto y al hacer clic en OK agrega las etiquetas div de apertura y cierre con las clases correspondientes, insertándolo en el editor 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: 'Etiqueta Lateral',
onclick: function (e) {
editor.windowManager.open( {
title: 'Insertar Etiqueta Lateral',
body: [{
type: 'textbox',
name: 'title',
placeholder: 'Escribe aquí el contenido de la etiqueta lateral.',
multiline: true,
minWidth: 700,
minHeight: 50,
},
{
type: 'button',
name: 'link',
text: 'Insertar/Editar enlace',
onclick: function( e ) {
// Obtener la ventana emergente "Insertar/editar enlace" de WordPress
},
}],
onsubmit: function( e ) {
editor.insertContent( '<div class="side-tag-wrap hidden-xs"><div class="side-tag">' + e.data.title + '</div></div>');
}
});
}
});
});
})();
Y esto es lo que hace:
Hasta aquí todo funciona, pero... También quiero poder agregar enlaces mientras la ventana emergente está abierta, exactamente como funciona el botón "Insertar/Editar enlace" del editor predeterminado. Sé cómo usar el plugin de enlaces de TinyMCE pero esto no ayuda. Principalmente necesito enlazar artículos ya publicados, por lo que requiero esta funcionalidad:
¿Hay alguna manera de llamar a este botón en mi ventana emergente personalizada o invocar la función quicktags?
Así que 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. El otro abre la ventana de medios incorporada de WordPress para seleccionar una imagen. Eso es lo que básicamente obtienes al final.
Necesitarás dos funciones PHP y una función JS en un archivo separado. En el functions.php, o donde tengas tus funciones personalizadas, añade lo siguiente:
/**
* Añadir un botón personalizado al editor tinymce
*/
function custom_mce_buttons() {
// Verificar si el editor WYSIWYG está activado
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');
// Añadir la ruta al archivo JS con la función del botón personalizado
function custom_tinymce_plugin( $plugin_array ) {
$plugin_array['custom_mce_button1'] = get_template_directory_uri() .'RUTA_AL_ARCHIVO_JS';
$plugin_array['custom_mce_button2'] = get_template_directory_uri() .'RUTA_AL_OTRO_ARCHIVO_JS';
return $plugin_array;
}
// Registrar y añadir nuevo botón en el editor
function register_mce_buttons( $buttons ) {
array_push( $buttons, 'custom_mce_button1' );
array_push( $buttons, 'custom_mce_button2' );
return $buttons;
}
Y el archivo JS.
(function () {
tinymce.PluginManager.add('custom_mce_button1', function(editor, url) {
editor.addButton('custom_mce_button1', {
icon: false,
text: 'TEXTO_DEL_BOTÓN',
onclick: function (e) {
editor.windowManager.open( {
title: 'TÍTULO_DE_LA_VENTANA_EMERGENTE',
body: [{
type: 'textbox',
name: 'title',
placeholder: 'TEXTO_DE_MARCADOR_DE_POSICIÓN',
multiline: true,
minWidth: 700,
minHeight: 50,
},
{
type: 'button',
name: 'link',
text: 'Insertar/Editar enlace',
onclick: function( e ) {
//obtener la ventana emergente "Insertar/editar enlace" de WordPress
var textareaId = jQuery('.mce-custom-textarea').attr('id');
wpActiveEditor = true; //necesitamos sobrescribir esta variable ya que el diálogo de enlace espera una instancia real de wp_editor
wpLink.open( textareaId ); //abrir el popup de enlace
return false;
},
},
{
type: 'button',
name: 'image',
classes: 'sidetag-media-button',
text: 'Insertar Medio',
onclick: function( e ) {
jQuery(function($){
// Establecer todas las variables para usar en el ámbito
var frame;
//debe coincidir con el "textareaID" anterior, porque es el campo de entrada donde
//vamos a insertar los datos en formato HTML.
var imgContainer = $( '.mce-custom-textarea' );
// AÑADIR ENLACE DE IMAGEN
event.preventDefault();
// Si el marco de medios ya existe, reabrirlo.
if ( frame ) {
frame.open();
return;
}
// Crear un nuevo marco de medios
frame = wp.media({
title: 'Seleccionar o Subir Medio',
button: {
text: 'Usar este medio'
},
multiple: false // Establecer en true para permitir la selección de múltiples archivos
});
// Cuando se selecciona una imagen en el marco de medios...
frame.on( 'select', function() {
// Obtener detalles del adjunto de medios del estado del marco
var attachment = frame.state().get('selection').first().toJSON();
// Enviar la URL del adjunto a nuestro campo de entrada de imagen personalizado.
var imageContent = '<img class="side-tag-image" src="'+attachment.url+'" alt="'+attachment.alt+'" style="max-width:100%;"/>'+attachment.caption;
imgContainer.val( imageContent + imgContainer.val() );
});
// Finalmente, abrir el modal al hacer clic
frame.open();
});
return false;
}
}],
onsubmit: function( e ) {
// envolverlo con un div y darle un nombre de clase
editor.insertContent( '<div class="NOMBRE_DE_CLASE">' + e.data.title + '</div>');
}
});
}
});
});
})();
Espero que esto ayude a algunos de ustedes...
Tengo dos problemas con esto: la ventana emergente de insertar medios se abre detrás de mi otra ventana emergente; y el enlace no se muestra en absoluto.
Samyer