我使用“redactor”(
http://imperavi.com/redactor)作为我的HTML编辑器.当一个页面中有多个编辑器时,如果我使用每个编辑器使用其ID进行初始化,这将完美地工作.但是当我使用它的类初始化时,第一个只能完美地工作.
我使用以下代码来初始化它
$(".htmlEditor").redactor();
第一个编辑工作.如果按第二个或其他编辑器的格式按钮,焦点将跳转到第一个编辑器.
如果我使用其ID分别初始化每个编辑器,那么所有编辑器都在工作.
我已经使用了其他jquery插件(在一个页面中使用类进行初始化的多个实例),应该有一种方法在这个插件中执行此操作.
我错过了吗？或者我必须做任何配置？
解决方法
您必须单独初始化每个编辑器.当您使用$(“.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/
这是一个屏幕截图,显示它是如何工作的：
