Inserare text la poziția cursorului în editorul TinyMCE

Question

Inserare text la poziția cursorului în editorul TinyMCE

10 iul. 2013, 15:04:16

Vizualizări: 16.6K

Voturi: 2

Am o funcție mică care permite unui utilizator să apese un buton sub un textarea și să insereze textul relevant (aceasta funcționează împreună cu plugin-ul jQuery textrange).

Totuși, deoarece folosesc editorul TinyMCE în plugin-ul meu, acest lucru funcționează doar în modul 'Text', nu și în 'Vizual'.

Am analizat codul sursă, dar nu reușesc să fac să funcționeze pentru ambele moduri. Știe cineva cum pot insera text în editor când este în modul 'Vizual'? Mulțumesc.

$(document).ready(function(){

    var button_text = {} // Textul care va fi inserat pentru fiecare click pe buton

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

        /** Obține poziția de start a cursorului în textarea */
        var start = textarea.textrange('get', 'start');

        /** Adaugă textul butonului la poziția de start */
        textarea.textrange('replace', text).trigger('updateInfo').focus();

        /** Textul nou adăugat va fi selectat, deci calculează poziția finală a selecției */
        var end = textarea.textrange('get', 'end');

        /** Mută cursorul la poziția finală, astfel încât niciun text să nu fie evidențiat */
        textarea.textrange('set', end, 0).trigger('updateInfo').focus();

    });

});

David Gard

3.3K

tinymce

Comentarii

Link către plugin-ul jQuery?

kaiser

10 iul. 2013 15:59:46

Oricum, această întrebare este despre Javascript și jQuery și este în afara tematicii acestui site.

kaiser

10 iul. 2013 16:07:21

Corect - Cum folosesc TinyMCE cu WordPress, tind să-l asociez implicit cu acesta.

David Gard

10 iul. 2013 16:19:46

Toate răspunsurile la întrebare

Comentarii

Acesta este plugin-ul despre care vorbeam, care nu are legătură cu întrebarea. Îl pot folosi deja când sunt în modul 'Text', dar problema apare în modul 'Vizual' - nu găsesc niciun element textarea, așadar textul nu este inserat. Mulțumesc.

David Gard

10 iul. 2013 16:23:55

@DavidGard Atunci (1) revino și editează întrebarea ta cu un link către plugin... și (2) nu vorbești despre textarea, ci despre editorul TinyMCE, corect?

kaiser

10 iul. 2013 16:47:54

(1) De ce este relevant plugin-ul?! Am inclus numele lui doar ca să nu se uite oamenii la cod și să creadă 'Acesta nu este un cod JS/jQuery valid'. Nu face nicio diferență. Codul acela funcționează când editorul este în modul 'Text', iar eu am nevoie de ajutor pentru modul 'Vizual'. Am inclus codul ca să vadă oamenii că am încercat! (2) Da, este vorba despre TinyMCE, și după cum spune comentariul meu anterior (ca răspuns la comentariul tău), a fost o omisiune din partea mea să pun întrebarea în acest forum. Folosesc Wordpress, nu folosesc altceva care să includă TinyMCE, deci mintea mea mică le-a asociat când am pus întrebarea!

David Gard

10 iul. 2013 16:53:39

^^ Și îmi cer scuze dacă cele de mai sus sună ca un rant, nu asta a fost intenția. Sunt recunoscător pentru orice ajutor.

David Gard

10 iul. 2013 16:55:53

@DavidGard Plugin-ul este relevant deoarece ar putea avea modalități complet diferite de a face lucrurile față de ceea ce s-ar putea aștepta cineva. De asemenea, face parte din întrebarea ta. Mai mult, acesta nu este un forum, ci un site de întrebări/răspunsuri care arhivează întrebări pentru cititorii viitori care au aceeași problemă. Despre textarea: Problema este că TinyMCE nu este un textarea, așa că a fost puțin confuz. Vezi actualizarea pentru cum să inserezi date în ambele. Problema va fi că plugin-ul tău jQuery nu va putea accesa conținutul TinyMCE.

kaiser

10 iul. 2013 16:57:58

Arată celelalte 1 comentarii

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

Pentru a testa acest lucru, am adăugat un buton într-una dintre celelalte cutii meta de pe ecranul de editare/creare a articolului, cu un id de addtxtbtn. La click, am preluat elementele textarea din interiorul #wp-content-editor-container, care este învelișul implicit pentru instanța implicită a Editorului WP. Poate fi necesar să ajustați acest lucru, dacă aveți un MarkUp diferit. Restul este preluat din demo-ul de pe GitHub - în cazul în care acesta este plugin-ul la care vă refereați.

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

Text

Deci, pe scurt: Pentru a adăuga text în textarea-ul "Text", faceți următoarele:

$( '#wp-content-editor-container' ).find( 'textarea' ).val( 'Text implicit' );

Vizual

Pentru a adăuga text în editorul "TinyMCE"/"Vizual", faceți următoarele:

tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, 'Text implicit' );

Dacă trebuie să obțineți conținutul din TinyMCE, puteți folosi următoarele:

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

Pentru a obține conținutul dintr-o anumită instanță TinyMCE (dacă ar fi posibil mai multe), folosiți:

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