Insertar texto en la posición del cursor en el editor TinyMCE

10 jul 2013, 15:04:16
Vistas: 16.6K
Votos: 2

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

    });

});
3
Comentarios

¿Enlace al plugin de jQuery?

kaiser kaiser
10 jul 2013 15:59:46

De todos modos, esta pregunta es sobre Javascript y jQuery y está fuera de tema en este sitio.

kaiser kaiser
10 jul 2013 16:07:21

Tiene sentido. Como uso TinyMCE con WordPress, tiendo a asociarlo con eso por defecto.

David Gard David Gard
10 jul 2013 16:19:46
Todas las respuestas a la pregunta 1
6

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();
10 jul 2013 16:07:02
Comentarios

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.

David Gard David Gard
10 jul 2013 16:23:55

@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?

kaiser kaiser
10 jul 2013 16:47:54

(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!

David Gard David Gard
10 jul 2013 16:53:39

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

David Gard David Gard
10 jul 2013 16:55:53

@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.

kaiser kaiser
10 jul 2013 16:57:58

Asumí que ese era el problema, pero no tenía idea de cómo solucionarlo. Tu código para el modo 'Visual' funciona e inserta el texto justo donde lo quiero. Gracias.

David Gard David Gard
10 jul 2013 16:59:54
Mostrar los 1 comentarios restantes