Cum să înlocuiești conținutul editorului tinyMCE atât în modul text cât și în modul vizual folosind jQuery?

Question

Cum să înlocuiești conținutul editorului tinyMCE atât în modul text cât și în modul vizual folosind jQuery?

3 nov. 2017, 07:05:07

Vizualizări: 21.5K

Voturi: 6

Am adăugat un buton lângă butonul Add Media în editorul de articole WordPress. Acesta se numește Insert Content.

Când acest buton este apăsat, ar trebui să introducă un conținut, fie text simplu sau HTML, în editor, înlocuind orice text existent.

Codul trebuie să funcționeze atât în modul text cât și în modul vizual. Cum pot face asta folosind jQuery?

Iată o imagine pentru a clarifica mai bine întrebarea:

Butonul Insert Content lângă Add Media în editorul WordPress

Notă: Există diverse răspunsuri deja, dar acestea abordează doar înlocuirea textului în modul vizual.

kosinix

1.54K

tinymce editor vizual editor-html

Toate răspunsurile la întrebare

Comentarii

Funcționează conform așteptărilor, ar trebui acceptat

Roland Soós

23 mai 2018 11:39:10

kosinix 1.54K · Accepted Answer · 2017-11-03T07:05:07Z

Primul lucru de făcut este să selectați editorul activ. Aici selectăm editorul folosind ID-ul său, care este content.

var activeEditor = tinyMCE.get('content');

Apoi folosim metoda setContent din tinyMCE:

var activeEditor = tinyMCE.get('content');
var content = 'Conținut HTML sau text simplu aici...';
activeEditor.setContent(content);

Cu toate acestea, dacă editorul este în modul text de la început, după încărcarea paginii, activeEditor va fi null. Deci trebuie să luăm în considerare acest lucru:

var activeEditor = tinyMCE.get('content');
var content = 'Conținut HTML sau text simplu aici...';
if(activeEditor!==null){
    activeEditor.setContent(content);
}

Deoarece setContent funcționează doar pentru tinyMCE, acest lucru nu va funcționa dacă editorul este în modul text. Deci trebuie să accesăm direct textarea și să îi actualizăm valoarea:

var activeEditor = tinyMCE.get('content');
var content = 'Conținut HTML sau text simplu aici...';
if(activeEditor!==null){
    activeEditor.setContent(content);
} else {
    $('#content').val(content);
}

Cu toate acestea, un alt aspect de luat în considerare este că dacă ați trecut în modul vizual și apoi v-ați întors în modul text, activeEditor nu mai este null, așa că setContent va fi apelat întotdeauna în loc de textarea. Deci trebuie să verificăm starea editorului. Pentru a determina modul curent, monitorizăm clasa div#wp-content-wrap. Combinând totul:

var content = 'Conținut HTML sau text simplu aici...';
if($('#wp-content-wrap').hasClass('html-active')){ // Suntem în modul text
    $('#content').val(content); // Actualizăm conținutul textareei
} else { // Suntem în modul tinyMCE
    var activeEditor = tinyMCE.get('content');
    if(activeEditor!==null){ // Asigurăm că nu apelăm setContent pe null
        activeEditor.setContent(content); // Actualizăm conținutul tinyMCE
    }
}