1

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

3 回答 3

2

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

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

所以你必须用这样的独特来覆盖它data-role：

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

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

于 2014-01-24T21:18:41.823 回答
0

本来打算发表评论，但它跑了很长时间。

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

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

于 2014-01-24T21:04:03.583 回答
-1

没试过，但你有没有试过分离 WYSIWYG 初始化。

$(function() {
    $("#definition").wysiwyg();
    $("#consent").wysiwyg();
})
于 2014-01-24T20:33:11.520 回答