Insertar texto en la posición del cursor en el editor TinyMCE
Tengo una pequeña función que permite a un usuario hacer clic en un botón debajo de un textarea e insertar el texto relevante (esto funciona junto con el plugin jQuery textrange
).
Sin embargo, como estoy usando el editor TinyMCE en mi plugin, esto solo funciona en modo 'Texto', no en 'Visual'.
He revisado el código fuente, pero no puedo entender cómo hacer que funcione en ambos modos. ¿Alguien sabe cómo puedo insertar texto en el editor cuando está en modo 'Visual'? Gracias.
$(document).ready(function(){
var button_text = {} // El texto a insertar para cada clic de botón
button_text['insert_event_name'] = 'event_name';
button_text['insert_event_date'] = 'event_date';
button_text['insert_event_start_time'] = 'event_start';
button_text['insert_event_finish_time'] = 'event_finish';
button_text['insert_event_location'] = 'event_location';
button_text['insert_event_address_inline'] = 'event_address_inline';
button_text['insert_event_address_blick'] = 'event_address_block';
$('.inserter', '#event-desc-container').on('click', function(){
var button = $(this).attr('name'),
text = '['+button_text[button]+']',
textarea = $('textarea#event_desc', '#event-desc-container');
/** Obtener la posición inicial del cursor en el textarea */
var start = textarea.textrange('get', 'start');
/** Añadir el texto relevante en la posición inicial */
textarea.textrange('replace', text).trigger('updateInfo').focus();
/** El texto añadido estará seleccionado, así que calcula la posición final */
var end = textarea.textrange('get', 'end');
/** Mover el cursor a la posición final, sin texto seleccionado */
textarea.textrange('set', end, 0).trigger('updateInfo').focus();
});
});

Para probar esto, he agregado un botón a uno de los otros meta boxes en la pantalla de edición/nueva publicación, con un id
de addtxtbtn
. Al hacer click
, obtuve los textarea
dentro de #wp-content-editor-container
, que es el contenedor predeterminado para la instancia del Editor de WP. Puede que necesites modificar esto si tienes un MarkUp diferente. El resto está tomado del demo en GitHub - en caso de que este sea el plugin del que hablabas.
( function($) {
$( '#addtxtbtn' ).on( 'click', function( e ) {
e.preventDefault();
var textarea = $( '#wp-content-editor-container' ).find( 'textarea' );
textarea.bind( 'updateInfo keyup mousedown mousemove mouseup', function() {
var range = $( this ).textrange();
console.log( range );
} );
} );
} )( jQuery );
Texto
En resumen: Para agregar texto al textarea
de "Texto", haz lo siguiente:
$( '#wp-content-editor-container' ).find( 'textarea' ).val( 'Algún texto predeterminado' );
Visual
Para agregar texto al editor "TinyMCE"/"Visual", haz lo siguiente:
tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, 'Algún texto predeterminado' );
Si necesitas obtener el contenido de TinyMCE, puedes usar lo siguiente:
// Crudo
tinyMCE.activeEditor.getContent( { format : 'raw' } );
// Contenido HTML:
tinyMCE.activeEditor.getContent();
Para obtener el contenido de una instancia específica de TinyMCE (si hubiera más de una), usa:
tinyMCE.get( 'algún-id' ).getContent();

Ese es el plugin del que estaba hablando, que no es relevante para la pregunta. Ya puedo usarlo en modo 'Texto', pero el problema está en el modo 'Visual' - no se encuentra un textarea, y por lo tanto el texto no se inserta. Gracias.

@DavidGard Entonces (1) vuelve y edita tu pregunta con un enlace al plugin ... y (2) no estás hablando del textarea
, sino del editor TinyMCE, ¿verdad?

(1) ¿Por qué es relevante el plugin?! Incluí su nombre para que la gente no mirara el código y pensara 'Eso no es JS/jQuery válido'. No hace diferencia. Ese código funciona cuando el editor está en modo 'Texto', y necesito ayuda con el modo 'Visual'. El código es para que la gente vea que lo intenté! (2) Sí, esto es sobre TinyMCE, y como dice mi comentario anterior (en respuesta a tu comentario), fue un descuido de mi parte poner la pregunta en este foro. Uso Wordpress, no uso nada más que incorpore TinyMCE, así que mi pequeño cerebro los asoció cuando hice la pregunta!

^^ Y disculpen si lo anterior suena como un desahogo, no es la intención. Agradezco cualquier ayuda.

@DavidGard El plugin es relevante ya que podría tener formas completamente diferentes de hacer las cosas de lo que uno esperaría. Además es parte de tu pregunta. También, esto no es un foro, es un sitio de preguntas/respuestas que archiva preguntas para futuros lectores con el mismo problema. Sobre el textarea
: El problema es que TinyMCE no es un textarea, así que era un poco confuso. Mira la actualización sobre cómo insertar datos en ambos. El problema será que tu plugin jQuery no podrá acceder al contenido de TinyMCE.
