javascript - 所见即所得的多个输入(jQuery插件)

我的页面需要两个富文本编辑器，因此我使用了所见即所得（所见即所得）。除了一个令人讨厌的细节外，它们工作正常。当我单击按钮以粗体，斜体或缩进时，它适用于两个RTE，并集中在第二个输入上。我不太清楚如何将工具栏彼此分开。

HTML：

<div class="form-group">
    <label for="definition" class="col-lg-3 control-label">Definition:</label>
    <div class="col-lg-3">
        <div class="btn-toolbar" data-role="editor-toolbar" data-target="##definition">
            <div class="btn-group">
                <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
            </div>
            <div class="btn-group">
                <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
            </div>
        </div>
        <div id="definition"></div>
    </div>
</div>
<div class="form-group">
    <label for="consent" class="col-lg-3 control-label">Consent:</label>
    <div class="col-lg-3">
        <div class="btn-toolbar" data-role="editor-toolbar" data-target="##consent">
            <div class="btn-group">
                <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
            </div>
            <div class="btn-group">
                <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
            </div>
        </div>
        <div id="consent"></div>
    </div>
</div>

JS（并非真正需要，但以防万一...）

$(function() {
    $("#definition, #consent").wysiwyg();
})

最佳答案

经过一段时间的研究，答案很简单。阅读源代码，您将看到它具有工具栏选择器：

toolbarSelector: '[data-role=editor-toolbar]',

因此，您必须使用唯一的data-role覆盖它，如下所示：

$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );

确保更改data-role以匹配新的选择器。