WYSIWYG Multiple Inputs (jQuery Plugin)

Question

I have a page that requires two Rich Text Editors, so I went with WYSIWYG (What You See Is What You Get). They work fine, except for one little annoying detail. When I click the buttons to bold, italicize or indent, it applies to BOTH RTEs, and focuses on the second input. I can't quite figure out how to separate the toolbars from each other.

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 (not really needed, but just in case...)

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

Answer 1

After a while of research, the answer is quite simple. Read into the source code and you'll see that it has a toolbar selector:

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

So you have to override that with a unique data-role like so:

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

Making sure to change the data-role to match the new selector.

Answer 2

Was going to just comment but it ran long.

If it's anything like my WYSIWYG editor, it's because the system is set up to work with one container. Even if you add 2 items, it will do the same to both. The only way you could get around this would be to create two separate pages and house them on the same page (via seamless Iframes, possibly AJAX).

Note that I don't know for sure how this particular editor works, but it looks like the backend works very similar (ie, those data- attributes are housing the related execCommand() arguments just as mine).

Answer 3

Haven't tried it but did you try separating the the WYSIWYG initialization.

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