Multiple instance of Redactor editor in one page is not working

Question

Im using "redactor" (http://imperavi.com/redactor) as my HTML editor. When there are multiple editor in one page, this is working perfectly if I initialize using each editor using its ID. But when I initialize using its class, the first one only working perfectly.

Im using following code to initialize this

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

the first editor works. If i press the format button of 2nd or other editor, focus jumps to the first editor.

if i initialize each editor separately using its ID, then all the editors are working.

but i wanted use class, since the editors are added to the page dynamically.

i have used other jquery plug-ins ( multiple instance in one page using class to initialize ), there should be a way to do this in this plugin.

am i missing any ? or do i have to do any config ?

Answer 1

You have to initialize each editor separately. When you use $(".htmlEditor").redactor();, you are selecting all editors that are already initialized editors inside the DOM tree and that's causing multiple initialization problems. You're saying you want to add editors dynamically, so you have to initialize each new editor separately, even without an ID. To do that, you'll have to get the latest dynamically added editor DOM object and use jquery to initialize it. I've wrote a simple example that has a button that adds a new editor and initializes it each time it gets a click:

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

Here is my working example you can test and see it's working: http://zikro.gr/dbg/html/redactor/

And here is a screen capture of it showing how it's working:

Answer 2

Try to use smth like this:

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