search

mindmup / bootstrap-wysiwyg

Tiny bootstrap-compatible WISWYG rich text editor
MIT License
5.56k stars 841 forks source link

Multiple Editors on one page #186

Closed ayyobro closed 9 years ago

ayyobro commented 9 years ago

Each editor has a data-target specific to the editor div (by id), but whenever I edit one, like add a bullet point, it adds the bullet point to all of them.

So, for instance

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor1">
    <div class="btn-group">
        <a class="btn btn-default" data-edit="bold" data-original-title="Bold (Ctrl/Cmd+B)" title="Bold"><i class="fa fa-bold"></i></a>
        <a class="btn btn-default" data-edit="italic" data-original-title="Italic (Ctrl/Cmd+I)" title="Italic"><i class="fa fa-italic"></i></i></a>
        <a class="btn btn-default" data-edit="underline" data-original-title="Underline (Ctrl/Cmd+U)" title="Underline"><i class="fa fa-underline"></i></i></a>
    </div>
</div>
<div id="editor1"></div>
<textarea class="form-control body-description hidden" id="hidden-editor" name="description"></textarea> <!-- editor html goes into here via jQuery, works great -->
    $('#editor1').wysiwyg();

Then I have a second instance, all the same stuff, except the id is editor2 instead of editor1, then editor3, editor4, etc... but all of them seem to target eachother regardless of whatever I set the data target to?

Help?

Crenshinibon commented 9 years ago

I do additionally bind the editor on instantiating to the corresponding toolbar, like:

$('#editor1').wysiwyg({ toolbarSelector: "#toolbar1" });

Taken, you give your toolbar the id "toolbar1"

Hope that helps.

Regards Dirk

ayyobro commented 9 years ago

Thanks! That fixed her right up. Appreciate it