mindmup / bootstrap-wysiwyg

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

Pressing any button in wysiwyg'd div loses focus, cannot type anything #175

Open altmind opened 9 years ago

altmind commented 9 years ago

I've prepared a small demo: http://s.codepen.io/altmind/debug/raLLLz? (fullscreen dbg), http://codepen.io/altmind/pen/raLLLz (codepen 3 panes) - it uses master bootstrap-wysiwyg.js

Try to type anything in wysiwyg'd element. For me, in latest chrome and IE 11, pressing any key cause control to lose focus and no text appears in control.

It seems that everything boils down to following:

bindHotkeys = function (hotKeys) {
                $.each(hotKeys, function (hotkey, command) {
                    editor.keydown(hotkey, function (e) {
                        if (editor.attr('contenteditable') && editor.is(':visible')) {
                            e.preventDefault();
                            e.stopPropagation();
                            execCommand(command);
                        }
                    }).keyup(hotkey, function (e) {
                        if (editor.attr('contenteditable') && editor.is(':visible')) {
                            e.preventDefault();
                            e.stopPropagation();
                        }
                    });
                });
            },

You can see, that we hook every editor.keydown and if element is contenteditable and visible, we preventDefault this event. This seems to be a wrong way to set up hotkeys - editor.keydown(hotkey,..) won't hook only specified hotkeys, it will hook all keypresses and pass hotkey param as eventData(http://api.jquery.com/keydown/)

Removing all code from bindHotkeys helps this problem, and we can still use default hotkeys(ctrl+b, ctrl+u), but of course lose ability to customize them.

What do you think, can we fix it? This issue seems to be show-stopper.

Coffeecream commented 9 years ago

I had the same problem, but the I found solution. It was enough just to add dependancy and link jquery.hotkeys.js

AndiRudi commented 9 years ago

I have the same problem. What do you mean by "add dependancy and link jquery.hotkeys.js"? I have both files but cannot edit any text in the contenteditable div.

Coffeecream commented 8 years ago

Yeah, stopped working for me. i don't know why it was working for a while and then wasn't working again. I used other script in stead.

arc95 commented 7 years ago

I'm having this exact issue. Have the hotkeys included. I commented out the code as @altmind suggested and it fixed the major issue, but I hate to disable the keybindings. Any solution?

arc95 commented 7 years ago

I've found a solution that doesn't involve commenting out the hotkey bindings: I copied and pasted the same version of the jquery.hotkeys.js used on the site here (instead of the latest available via NuGet) and noticed the two are different. The newest one is 0.8+, while the one used here is just 0.8. Apparently, the newer one introduced a bug. Now the plugin works well as do the shortcuts.

To get the hotkeys file used here, just go to the external folder: https://github.com/mindmup/bootstrap-wysiwyg/blob/master/external/jquery.hotkeys.js