我使用“redactor”(http://imperavi.com/redactor)作为我的HTML编辑器。当一个页面中有多个编辑器时,如果我使用其ID使用每个编辑器进行初始化,这将完美地工作。但是当我使用它的类初始化时,第一个只能完美地工作。
我使用以下代码初始化
$(".htmlEditor").redactor();
第一个编辑工作。如果我按下第二个或其他编辑器的格式按钮,焦点会跳转到第一个编辑器。
如果我使用其ID分别初始化每个编辑器,那么所有编辑器都在工作。
但我想要使用类,因为编辑器会动态添加到页面中。
我已经使用了其他jquery插件(在一个页面中使用类进行初始化的多个实例),应该有一种方法可以在这个插件中执行此操作。
我错过了吗?或者我必须做任何配置?答案 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/
这是一个屏幕截图,显示它是如何工作的:
答案 1 :(得分:1)
尝试使用这样的smth:
$(".htmlEditor").each(function() {
$(this).redactor();
});
答案 2 :(得分:0)
试试这个
for redactor in $(document).find("textarea.editor")
$(redactor).redactor()