Mehrere Instanzen von Redactor-Editor auf einer Seite funktioniert nicht

Question

Im Verwenden von "Redactor" (http://imperavi.com/redactor) als meine HTML-Editor. Wenn es auf einer Seite mehrere Editoren gibt, funktioniert das perfekt, wenn ich die einzelnen Editoren mit ihrer ID initialisiere. Aber wenn ich mit seiner Klasse initialisiere, funktioniert die erste nur perfekt.

Im folgenden Code kann über dieses Werk

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

die ersten Editor zu initialisieren. Wenn ich die Format-Taste des 2. oder anderen Editors drücke, springt der Fokus zum ersten Editor.

Wenn ich jeden Editor einzeln mit seiner ID initialisiere, dann arbeiten alle Editoren.

aber ich wollte Verwendung Klasse, da die Editoren auf der Seite dynamisch hinzugefügt werden.

Ich habe andere jquery-Plug-ins verwendet (mehrere Instanzen auf einer Seite, die die Klasse initialisieren), es sollte eine Möglichkeit geben, dies in diesem Plugin zu tun.

vermisse ich irgendwelche? oder muss ich irgendeine Konfiguration tun?

Answer 1

Versuchen smth wie folgt zu verwenden:

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

Answer 2

Sie haben jeden Editor separat zu initialisieren. Wenn Sie $(".htmlEditor").redactor(); verwenden, wählen Sie alle Editoren aus, die bereits in der DOM-Struktur initialisiert wurden und mehrere Initialisierungsprobleme verursachen. Sie sagen, dass Sie die Editoren dynamisch hinzufügen möchten. Daher müssen Sie jeden neuen Editor separat initialisieren, auch ohne eine ID. Dazu müssen Sie das neueste dynamisch hinzugefügte Editor-DOM-Objekt abrufen und jQuery verwenden, um es zu initialisieren. Ich habe geschrieben, ein einfaches Beispiel, das eine Schaltfläche hat, die einen neuen Editor fügt hinzu und initialisiert sie jedes Mal, wenn ein Klick bekommt:

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

Hier ist mein Arbeitsbeispiel, das Sie testen können und es funktioniert: http://zikro.gr/dbg/html/redactor/

Und hier ist ein Screen-Capture davon zeigt, wie es funktioniert:

Answer 3

Versuchen Sie, diese

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

     $(redactor).redactor()