Più istanza dell'editor Redactor in una pagina non funziona

Question

Im utilizzando "redactor" (http://imperavi.com/redactor) come editor HTML. Quando ci sono più editor in una pagina, funziona perfettamente se inizializzo usando ciascun editor usando il suo ID. Ma quando inizializzo usando la sua classe, la prima funziona perfettamente.

Im utilizzando il codice seguente per inizializzare questo

$(".htmlEditor").redactor(); 

i primi Editor funziona. Se premo il pulsante di formattazione del 2 ° o di un altro editor, focus salta al primo editor.

se inizializzo ciascun editor separatamente utilizzando il suo ID, quindi tutti gli editor funzionano.

ma volevo usare la classe, poiché gli editor sono aggiunti dinamicamente alla pagina.

Ho usato altri plug-in jquery (più istanze in una pagina utilizzando la classe per inizializzare), ci dovrebbe essere un modo per farlo in questo plugin.

sono mancante? o devo fare qualche configurazione?

Answer 1

Prova ad utilizzare smth come questo:

$(".htmlEditor").each(function() { 
    $(this).redactor(); 
}); 

Answer 2

si deve inizializzare ogni editore separatamente. Quando si utilizza $(".htmlEditor").redactor();, si selezionano tutti gli editor che sono già editor inizializzati all'interno dell'albero DOM e questo causa problemi di inizializzazione multipli. Stai dicendo che vuoi aggiungere gli editor in modo dinamico, quindi devi inizializzare ogni nuovo editor separatamente, anche senza un ID. Per fare ciò, dovrete ottenere l'ultimo oggetto DOM dell'editor aggiunto dinamicamente e usare jquery per inizializzarlo. Ho scritto un semplice esempio che ha un pulsante che aggiunge un nuovo editor e l'inizializza ogni volta che si ottiene un clic:

HTML

<div id="editors"></div> 

<button id="add-editor">Add New Editor</button> 

Javascript

$('#add-editor').on('click', function() { 
    var new_editor_text = "<h2>Hello and welcome</h2>" + 
     "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"; 

    var $editor = $('<textarea/>', { 'class': 'redactor-editor', text: new_editor_text }); 

    $('#editors').append($editor); 
    $editor.redactor(); 
}); 

Ecco il mio esempio di lavoro che puoi testare e vedere funziona: http://zikro.gr/dbg/html/redactor/

E qui è una cattura dello schermo di esso che mostra come sta funzionando:

Answer 3

Prova questa

for redactor in $(document).find("textarea.editor") 

     $(redactor).redactor()