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.

hi, my scenario: i'm using the editor part, and upon pressing command+p, i pop open a dialog. additionally, on every keyup i launch a callback to "save" my text using a call to editor.cleanHtml().

when pressing command+p, the dialog window opens, and then cleanHtml get called due to keyup - and for some reason, the call to $(this).html() actually pastes the html into the editor itself ?!

any ideas why and what can be a workaround?

thx!

When I open a modal window with an editor in it, I can't type in the editor - at the first keystroke, the Bold button lights up (first button in my toolbar) and that's it. No text can be typed into the editor.

If I dismiss the modal and re-open it, everything works perfectly.

Any idea what could be going on? I can provide more info at request - just don't know what would be helpful here...

It is mentioned in the docs that jQuery HotKeys is a dependency. But I interpreted this as "a dependency - if you intend to use the hotkey feature" ... and without it, the core functionality would still work. This is a standard terminology that other libraries use.

It took me a while to realise that the jQuery HotKeys REALLY is a dependency. i.e. the whole thing relies on it. I think this should be made very, very clear in the instructions/documentation.

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#descriptionEn">
...
</div>
<div id="descriptionEn" name="descriptionEn"></div>

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#descriptionRu">
...
</div>
<div id="descriptionRu" name="descriptionRu"></div>

Both toolbars are working in one mode

Hi !

I have made some critical bugfixes for your project : There was a typo in Font-Awesome name in your About & Readme.

Yes, I know...

See you, Thomas.

When I move over a button I clearly see all the buttons on his right move. I'm using firefox 20 on Fedora 18.

Usually a .btn-group .btn has a computed left margin of -1px When hovering a .btn, the .btn next to him pass from having a margin-left of -1px to a margin-left of 0px, resulting in the visible effect of all the next buttons to move on the right.

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?

Here's the latest push from 12 developers fixing some problems.

There are three open issues.

This will close #171 #172 #157 (We added requirements, but we'll fix silent failure later) and clarifies use of #159 #149 #147 #143 #141 #140 #138 #52 #138 #136 #134 #135 (Updated) #133 #116 (The reason I got onto this project) #112 #113 #113 (Updated) #109 #101 #91 #86 #83 ( in 5f46909132a10fae95667d586f361b477b7cd09d ) #65 #61 (Appears to be working) #48 #40 #23 and #19

Should close #167 #164 (by adding multiple input support)

Good morning everyone,

I'm using this plugin in a page that contains multiple instances of the editor (dynamically created, one fixed), but I need to have a single toolbar dynamically binded into the correct editor (I'm using Knockout 3.2).

I've already read issue #52 (https://github.com/mindmup/bootstrap-wysiwyg/issues/52) (expecially Makusu answer) and I've binded the code as below:

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

and for the toolbar

< div data-role="editor-toolbar" data-bind="attr: {'data-target' : $root.toolbarBind}" >

where $root.toolbarBind is the ID of the editor selected.

However, when I click some button on the toolbar, it modifies only the first of the editors, the fixed one. If I use the keyboard shortcut, they work flawlessy.

What could possibly went wrong?

Hi

Love the script, light weight, works great! Glad I switched to bootstrap :+1:

Can you get your script on one of the cdn's? Would be great since I am trying to develop with hosting as little js/css files as I can.

https://github.com/cdnjs/cdnjs

Added you to my project, will link soon: https://github.com/gcphost/l4-bootstrap-admin

With the WYSIWYG editor, if you select outside of the text area and then mouse over the WYSIWYG area, the buttons update to show the state of whatever the current selection is. This is because of editor.attr('contenteditable', true).on('mouseup keyup mouseout', function () { Removing the mouseout from that line fix's the issue, but im not sure if it breaks some functionality.

I am struggling to get html formatted texct inside the editor (i.e. from database), then edit the text and save it back to the db. Any working example?

I am using the editor with Bootstrap and FontAwesome 4. Just a few changes from the example and it works great. When typing 2 lines of text separated by CR inside the editor the html output is: line one<div>line two</div> Is it possible to force the editor for a paragraph tag instead of a div tag and also tagging the first line so the output would be: <p>line one</p><p>line two</p> Of course, it is possible with JS but is there another way?