一个页面中的多个Redactor编辑器实例无法正常工作

Question

我使用"redactor"(http://imperavi.com/redactor)作为我的HTML编辑器.当一个页面中有多个编辑器时,如果我使用其ID使用每个编辑器进行初始化,这将完美地工作.但是当我使用它的类初始化时,第一个只能完美地工作.

我使用以下代码来初始化它

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

第一个编辑工作.如果我按下第二个或其他编辑器的格式按钮,焦点会跳转到第一个编辑器.

如果我使用其ID分别初始化每个编辑器,那么所有编辑器都在工作.

但我想要使用类,因为编辑器是动态添加到页面的.

我已经使用了其他jquery插件(在一个页面中使用类进行初始化的多个实例),应该有一种方法可以在这个插件中执行此操作.

我错过了吗？或者我必须做任何配置？

Answer 1

您必须单独初始化每个编辑器.当您使用时$(".htmlEditor").redactor();,您正在选择DOM树中已经初始化的编辑器的所有编辑器,这会导致多个初始化问题.您说要动态添加编辑器,因此即使没有ID,您也必须单独初始化每个新编辑器.为此,您必须获取最新动态添加的编辑器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();
});