Inserire testo alla posizione del cursore nell'editor TinyMCE

Question

Inserire testo alla posizione del cursore nell'editor TinyMCE

10 lug 2013, 15:04:16

Visualizzazioni: 16.6K

Voti: 2

Ho una piccola funzione che permette all'utente di cliccare un pulsante sotto una textarea e inserire il testo rilevante (funziona insieme al plugin jQuery textrange).

Tuttavia, poiché sto usando l'editor TinyMCE nel mio plugin, questo funziona solo in modalità 'Testo', non 'Visuale'.

Ho esaminato il codice sorgente, ma non riesco a capire come farlo funzionare in entrambe le modalità. Qualcuno sa come posso inserire testo nell'editor quando è in modalità 'Visuale'? Grazie.

$(document).ready(function(){

    var button_text = {} // Testo da inserire per ogni click sul pulsante

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

        /** Ottieni la posizione iniziale del cursore nella textarea */
        var start = textarea.textrange('get', 'start');

        /** Aggiungi il testo del pulsante alla posizione iniziale */
        textarea.textrange('replace', text).trigger('updateInfo').focus();

        /** Il testo appena aggiunto sarà selezionato, quindi calcola la posizione finale della selezione */
        var end = textarea.textrange('get', 'end');

        /** Sposta il cursore alla posizione finale, così che nessun testo rimanga evidenziato */
        textarea.textrange('set', end, 0).trigger('updateInfo').focus();

    });

});

David Gard

3.3K

tinymce

Commenti

Link al plugin jQuery?

kaiser

10 lug 2013 15:59:46

Comunque, questa domanda riguarda Javascript e jQuery ed è fuori tema su questo sito.

kaiser

10 lug 2013 16:07:21

Giusto - Poiché uso TinyMCE con Wordpress, tendo ad associarlo a quello per impostazione predefinita.

David Gard

10 lug 2013 16:19:46

Tutte le risposte alla domanda

Commenti

Questo è il plugin di cui parlavo, che è irrilevante per la domanda. Posso già usarlo quando sono in modalità 'Testo', ma il problema è nella modalità 'Visuale' - non viene trovato alcun textarea, e quindi il testo non viene inserito. Grazie.

David Gard

10 lug 2013 16:23:55

@DavidGard Allora (1) torna indietro e modifica la tua domanda con un link al plugin... e (2) non stai parlando del textarea, ma dell'editor TinyMCE, giusto?

kaiser

10 lug 2013 16:47:54

(1) Perché il plugin è rilevante?! Ho incluso il nome in modo che le persone non guardassero il codice e pensassero 'Questo non è JS/jQuery valido'. Non fa differenza. Quel codice funziona quando l'editor è in modalità 'Testo', e ho bisogno di aiuto per la modalità 'Visuale'. Il codice è lì per far vedere che ci ho provato! (2) Sì, questo riguarda TinyMCE, e come dice il mio commento sopra (in risposta al tuo), è stata una svista da parte mia porre la domanda in questo forum. Uso Wordpress, non uso nient'altro che incorpori TinyMCE, quindi il mio piccolo cervello li ha associati quando ho fatto la domanda!

David Gard

10 lug 2013 16:53:39

^^ E mi scuso se quanto scritto sopra sembra una lamentela, non è mia intenzione. Sono grato per qualsiasi aiuto.

David Gard

10 lug 2013 16:55:53

@DavidGard Il plugin è rilevante in quanto potrebbe avere modi completamente diversi di fare le cose rispetto a quanto ci si aspetterebbe. Inoltre fa parte della tua domanda. Inoltre, questo non è un forum, ma un sito di domande/risposte che archivia le domande per lettori futuri che potrebbero avere lo stesso problema. Riguardo al textarea: il problema è che TinyMCE non è un textarea, quindi era leggermente confuso. Vedi l'aggiornamento su come inserire i dati in entrambi. Il problema sarà che il tuo plugin jQuery potrebbe non essere in grado di accedere al contenuto di TinyMCE.

kaiser

10 lug 2013 16:57:58

Mostra i restanti 1 commenti

kaiser 50.8K · Accepted Answer · 2013-07-10T16:07:02Z

Per testarlo, ho aggiunto un pulsante a una delle altre metabox nella schermata di modifica/creazione del post, con un id di addtxtbtn. Al click, ho preso i textarea all'interno di #wp-content-editor-container, che è il wrapper predefinito per l'istanza predefinita dell'editor di WordPress. Potresti doverlo modificare, se hai un MarkUp diverso. Il resto è preso dalla demo su GitHub - nel caso questo sia il plugin di cui parlavi.

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

Testo

Quindi, in breve: Per aggiungere testo al textarea "Testo", fai quanto segue:

$( '#wp-content-editor-container' ).find( 'textarea' ).val( 'Testo predefinito' );

Visuale

Per aggiungere testo all'editor "TinyMCE"/"Visuale", fai quanto segue:

tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, 'Testo predefinito' );

Se hai bisogno di ottenere il contenuto da TinyMCE, puoi usare quanto segue:

// Raw
tinyMCE.activeEditor.getContent( { format : 'raw' } );
// Contenuto HTML:
tinyMCE.activeEditor.getContent();

Per ottenere il contenuto da una specifica istanza di TinyMCE (se ce ne fosse più di una), usa:

tinyMCE.get( 'some-id' ).getContent();