Multiple instances

[chrisharrison]

If you have a bunch of divs on the page with the same class ( .rte for instance), and apply the .wysiwyg method to them, they work perfectly with the hotkeys but the buttons don't work.

If however, you apply a div to each one ( #rte1 #rte2 etc) it does work. This is OK, and for me I can easily do that programmatically in the flow of my application. But it's not standard and caused a little bit of confusion for me, and perhaps a lot of hair pulling for others.

[elias-selinder]

Hi
I have the exact same problem with multiple instances. How did you apply a div to make it work? Do you have an example?
Thanks!

[gojko]

you can pass an option for the toolbar selector. By default, wysiwyg widget will use the data-role selector, but you can override it to bind to any JQuery selector (even IDs). So to prevent multiple instances to bind to all the toolbars, give toolbars IDs and pass different selectors into different instances. See line 192 of https://github.com/mindmup/bootstrap-wysiwyg/blob/master/bootstrap-wysiwyg.js

[wenjie711]

Hi
I still don't know how to make it work with multiple instances.Could you give me an example?

[makusu]

Hi @chrisharrison, @nossai, and @wenjie711,

If you still haven't figured out how to do this, this is something that you might want to do:

    $('#editor').wysiwyg();

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

and change your btn toolbar into:

    <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">

    <div class="btn-toolbar" data-role="editor2-toolbar" data-target="#editor2">

[beshur]

Thank you for the explanation, guys.
But what if I want to use the same toolbar for different editor areas?
tnx

Is there a method to dynamically change options of the wysiwyg?

[sureshvtt]

Thanks for the example.

[JustWe]

Thanks!

[toledoroy]

Thanks @makusu !!

[ranjithnori]

Thanks @gojko and @makusu !

[klausrz]

thanks guy!

[neumachen]

@makusu how would you do that if you were cloning elements and want to have WYSIWYG enabled on each clone node?

[makusu]

@magicalbanana Sorry for late reply. Busy these days.

You basically need to have 2 different IDs for each of the WYSIWYG element.

Please take it with a pinch of salt since my comment was well over 3 years ago.