Несколько экземпляров редактора Redactor на одной странице не работают

Question

Я использую "редактор" ( http://imperavi.com/redactor) в качестве редактора HTML. Когда на одной странице несколько редакторов, это работает отлично, если я инициализирую каждый редактор, используя его ID. Но когда я инициализирую с использованием его класса, первый работает только отлично.

Я использую следующий код для инициализации этого

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

первый редактор работает. Если я нажимаю кнопку форматирования второго или другого редактора, фокус переходит к первому редактору.

если я инициализирую каждый редактор отдельно, используя его идентификатор, то все редакторы работают.

но я хотел использовать класс, так как редакторы добавляются на страницу динамически.

я использовал другие плагины jquery (несколько экземпляров на одной странице, используя класс для инициализации), в этом плагине должен быть способ сделать это.

я что-то пропустил? или я должен сделать любой конфиг?

Answer 1

Вы должны инициализировать каждый редактор отдельно. Когда вы используете $(".htmlEditor").redactor();Вы выбираете все редакторы, которые уже инициализированы редакторами в дереве DOM, и это вызывает множество проблем инициализации. Вы говорите, что хотите динамически добавлять редакторы, поэтому вам нужно инициализировать каждый новый редактор отдельно, даже без идентификатора. Для этого вам нужно получить последний динамически добавленный объект DOM редактора и использовать jquery для его инициализации. Я написал простой пример, в котором есть кнопка, которая добавляет новый редактор и инициализирует его при каждом нажатии:

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

Вот мой рабочий пример, который вы можете проверить и убедиться, что он работает: http://zikro.gr/dbg/html/redactor/

И вот снимок экрана, показывающий, как это работает:

Answer 2

Попробуйте использовать что-то вроде этого:

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

Answer 3

Попробуй это

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

      $(redactor).redactor()