Question

我有一个页面需要两个富文本编辑器，所以我选择了WYSIWYG（所见即所得）。它们工作正常，除了一个令人烦恼的细节。当我单击按钮以粗体，斜体或缩进时，它适用于两个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();
})

Answer 1

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

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

所以你必须用一个独特的data-role覆盖它，如下所示：

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

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

Answer 2

只是发表评论但是时间很长。

如果它与我的WYSIWYG编辑器类似，那是因为系统设置为使用一个容器。即使您添加了2个项目，它也会对两个项目执行相同的操作。解决这个问题的唯一方法是创建两个单独的页面并将它们放在同一页面上（通过无缝的iframe，可能是AJAX）。

请注意，我不确定这个特定的编辑器是如何工作的，但看起来后端的工作方式非常相似（即，那些数据属性正在容纳相关的execCommand()参数，就像我的一样。） / p>

Answer 3

Haven没有尝试过，但你是否尝试将WYSIWYG初始化分开。

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

WYSIWYG多输入（jQuery插件）

3 个答案: