Multiple editors on one page

[timkley]

Hi,

I assumed, because of the data-target attribute that I would be able to use multiple editors on one page and just could initiate them all with a class like this: $('.editor').wysiwyg()

Now this is not working as expected with version 1.0.1. I believe this is because the editor is not instantiated on each object of the select but only on the first. Also, I could find no reference about the use of data-target within the code.

Before I try to solve this by myself: is there something I'm missing or I am doing wrong?

Thanks for your kind answer.

[codewithtyler]

I believe the data-target attribute is being used as a means of identifying which editor the toolbar should update.

I'm was able to create and use two editors in my fork. As you can see I called the wysiwyg function on both editors rather than setting them to a single class. I got both editors to work, but I did find a bug where sometimes (not always) if you work in one editor then immediately switch to another editor whatever you do there will also happen to the last text you selected in the first editor.

[codewithtyler]

@steveathon I got to thinking about this issue this morning. If we disable the other editors on the page when the user isn't using them I believe that might fix our issue as it would force the styles to only be applied to whichever editor is currently enabled. What do you think?

[rolero]

For some reason this solution does not work with me. I am using two editors in one page. I can nicely type in both editors and also the form submit works perfectly. The issue that I have, is when I click on the toolbar buttons. When I click one the toolbar of editor 1 is also affects editor 2 and vice versa. Both in my own code as in the code given above I see the same behaviour. Try the code given by RandomlyKnighted and you will notice.

bootstrap v3.1.1
jquery v2.1.0
jquery.hotkeys v0.8
prettify v2.9.8
bootstrap-wysiwyg v1.0.4.

[codewithtyler]

The idea I proposed was not a tested solution. However, thank you for testing it and I will continue to investigate this issue further.

[rolero]

Thanks,please let me know if you have solution. Really like the editor but currently can't use it the way I intended to.

Sent from my iPhone

On 17 okt. 2015, at 22:26, Tyler Hughes notifications@github.com wrote:

The idea I proposed was not a tested a solution. However, thank you for testing it and I will continue to investigate this issue further.

—
Reply to this email directly or view it on GitHub.

[EmmersonBrady]

For me the handling of multiple editors works with a unique "editor-toolbar" datatag in data-role.

Example:
In html
<div class="btn-toolbar editorToolbar" data-role="editor-toolbar_editor1" data-target...

Then init wysiwyg-editor in Javascript with the changed toolbarSelector.

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

[codewithtyler]

Thank you @EmmersonBrady. That infornation is useful in helping to detemine the root cause.

[techmag]

I started this on: mindmup#52 (which has a little more data) but noted the request to keep "issues" over on this repo.

Hey everyone -- thank you for documenting this so clearly.

I just got many multiple editors working cleanly on a single page based on the info contained in this thread.

I do notice one minor issue (for me). If I move the mouse over a different editor (the div with contents) the toolbar for that div "picks up" the attributes for the currently active text curser (still active in another div).

I'm using AngularJS with an ng-model to sync the data in the divs to a hidden textarea so that might be the challenge or perhaps just complicating things.

I'm just wondering if: Anyone else observes this behaviour?

OR if someone has a hint as to what i might look at (I'm far more versed in lots of things other than JS but gradually treading water in the deep end now and then)

So to recap for clarity I have

[[ toolbar 1 ]]

[[ div 1 ]]

[[ hidden textarea 1 ]]

[[ toolbar 2 ]]

[[ div 2 ]]

[[ hidden textarea 2 ]]

Edits (including setting/changing attributes) in div 1 work cleanly without interfering with div 2 and vice versa

If the currently editing text cursor stays in div 2 and mouse pointer travels over div 1 then matching attributes (the bold, font, paragraph style etc of div 2) are indicated in toolbar 1 even if nothing in div 1 matches any of those attributes (nothing in div 1 changes either and if I click into div 1 and start editing it still gets the attributes correct for div 1 so editing itself is fine -- it is just a confusing display issue)

[ToineSeiter]

Hello,

What about replacing $(options.toolbarSelector) by $(editor).parent().find(options.toolbarSelector) in bootstrap-wysiwyg.js ? (line 56 and 266)

It works for me ;)

[codewithtyler]

@ToineSeiter can you share what those two functions look like in your file please? I haven't been able to replicate your results yet and I'd like to look at yours to make sure I've done the same thing.

[ToineSeiter]

Excuse me for the delay. @RandomlyKnighted Sure I can share.
I use bootstrap-wysiwyg 1.0.4 (master branch) and here are my updates :
bootstrap-wysiwyg.js.txt

[andrews05]

I'm using a single floating toolbar and have got it working with multiple editors like this:

var activeEditor;
var toolbar = $('#editor-toolbar');
var editors = $('.editor').click(function(e) {
    // Remember the active editor
    if (activeEditor !== this) {
        activeEditor = this;
        // Unbind all toolbar events so they don't interfere with other editors
        toolbar.show().find('[data-edit]').off();
        $(this).before(toolbar).wysiwyg().focus();
    }
});
$(document).click(function(e) {
    // Hide the toolbar when clicking outside
    if (activeEditor && !$(e.target).closest(toolbar.add(editors)).length) {
        activeEditor.blur();
        activeEditor = null;
        toolbar.hide();
    }
});

[codewithtyler]

@andrews05 have you been able to get it working with one toolbar per editor?

[andrews05]

In my case that wasn't what I was wanting to do (didn't want to duplicate the toolbar for each editor).
For one per editor, I would have thought using a unique id for the toolbarSelector would be sufficient?

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

[codewithtyler]

So the code above for the single editor. Did that go in one of your scripts or did you update the bootstrap-wysiwyg.js file?

[andrews05]

The code for the single toolbar was just in my script, no modifications to bootstrap-wysiwyg.js.

[codewithtyler]

Alright, thanks! I'll see if I can find some time over the holidays to see how we might can use this to fix the issue.

[andrews05]

I'm not sure if there actually is any issue with the code. It seems like the issue is just a lack of documentation on the options. The readme shows the toolbar having data-target="#editor" which makes you think that you can use this to setup multiple editors when in fact it doesn't do anything at all (is it left over from an older version perhaps?).

[codewithtyler]

Ah I see what you mean now. I did a search through the code base and there is no reference to the data-target attribute at all. There are a couple of routes we can take from here.

1. Removing reference of data-target="editor" from the README.
2. We should implement it so that use of `data-target="editor" will only apply the styling to the specific editor.

[andrews05]

I'd suggest #1 as otherwise it could get confusing having data-target as well as toolbarSelector. More importantly though, some documentation of all the options would be good :)

[codewithtyler]

Ah I see now. So it looks like data-target and toolbarSelector may be the same thing. I'll chat it over with @steveathon and get this thoughts on it.