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

时间:2015-01-14 06:53:38

标签: jquery redactor redactor.js

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

我使用以下代码初始化

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

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

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

但我想要使用类,因为编辑器会动态添加到页面中。

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

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

3 个答案:

答案 0 :(得分:5)

您必须单独初始化每个编辑器。当您使用$(".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/

这是一个屏幕截图,显示它是如何工作的:

Screen Capture

答案 1 :(得分:1)

尝试使用这样的smth:

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

答案 2 :(得分:0)

试试这个

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

      $(redactor).redactor()