Support multiple editors on the same page about bootstrap-wysihtml5

[buzzedword]

@Nerian, are you setting the options for the editor? Also if you have a gist, gh-pages, or repo to reference that'd be super helpful to build a test case.

[jhollingworth]

It's a known issue with wysihtml5. Ticket has been raised tiff/wysihtml5#20

[buzzedword]

Well that settles that.

[Nerian]

I see thanks :)

I created a plugin for Ruby on Rails: https://github.com/Nerian/bootstrap-wysihtml5-rails

[jhollingworth]

that sir is awesome! :D

[jhollingworth]

This is a bug in wysihtml5 not bootstrap-wysihtml5 so closing.

[tiff]

btw: this has just been fixed in wysihtml5. https://github.com/xing/wysihtml5

[monkeymademe]

Tip to all - Took me a while to work it out. No matter which selector you use to find the textarea you need an id for each textarea and also it needs to be unique so that wysihtml5 knows which textarea the commands goto...

(I just mention it cause it was not as clear to me for a while)

[benbonnet]

how do you associate the toolbar if it is by default using an id ?

[emma-uxrepublic]

@tiff hello i'm sorry to up this old topic, but I'd like to ask how it's working now ? I want to use several wysiwyg on one page. I saw that the bug was fixed, so I took the latest version, and I'm trying to access to my elements classes like this :

var editor = new wysihtml5.Editor(document.querySelector('.wysihtml5-textarea'), {

            toolbar: document.querySelector('.wysihtml5-toolbar'),
            parserRules:  wysihtml5ParserRules // defined in file parser rules javascript

        });

It's working only for the first one. It's the same as when it was an ID.
I don't see how the bug was fixed ? Or maybe I'm missing something ?
Than you for your help.

[emma-uxrepublic]

Nevermind I just used an .each()

=)

[EpiFred]

@emma-uxrepublic Hi, sorry to up this topic too, but I try to use your method to have several editor but it didn't work for me. Can you please tell me how did you do with the .each() please ? :)

Thanks for your help

[emma-uxrepublic]

Hello

You should use it in a way near that :

        $('.wysihtml5-toolbar').each(function(){
            var textareaid = point your textarea
            var toolbarid = point your toolbar

            var editor = new wysihtml5.Editor(textareaid, { 
              toolbar:      toolbarid, 
              parserRules:  wysihtml5ParserRules // defined in parser rules set 
            });
        })

[EpiFred]

Thanks for your answer, but it doesn't work :/

I have my textarea like this with a loop:
`

                <div class="divinput">
                    <div id="toolbar" class="toolbar" style="display: none;">
                        <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |

                        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |

                        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3">h3</a> |              
                    </div>
                    <textarea id="textarea" name="content[]" placeholder="Enter text ..."></textarea>
                </div>
                <?php } ?>`

and the JS

`$(".divinput").each(function(){
var textareaid = document.getElementById('textarea');
var toolbarid = document.getElementById('toolbar');

var editor = new wysihtml5.Editor(textareaid, {
    toolbar:      toolbarid,
    parserRules:  wysihtml5ParserRules

});
});`

But a the end, I only have the first textarea that works well.

Can you tell me what's wrong please ? Thanks

[emma-uxrepublic]

One ID can't be repeated pal ^^
You've created a loop that is giving the same ID to each wysiwyg
Also, you shouldn't put CSS inline in your html. It's not really impacting, but it would be more clean ^^

[EpiFred]

Of course.... shame on me ^^ Thanks a lot for your help it works now !
And yeah, the css in my html is just for testing, only testing ! ^^

Thanks again !! :D

[emma-uxrepublic]

=D