CKEditor no space on buttons

Question

I'm using the CKEDITOR.inline(element) feature of CKEditor (contenteditable=true) in a "WYSIWYG" content editor that I'm working on. The thing works great for all kinds of tags that I've tested with except on:

When I go to edit a <button>, I can edit the text inside of the tag, just fine, except for "space".

When I hit the spacebar, instead of getting a space character inserted in the text, the button attempts to be "pressed", since, I'm assuming the default functionality of the browser is to try and "press" a button that is focused.

So.. I tried to "highjack" the $(element).on('keydown') event and checked for keycode 32 to apply preventDefault to the event. That technically worked to do the "highjacking" (I can see the below console.log), but I still don't get a "space" in the content.

var _fixButtonSpaceKeydown = function(elem, removeBinding){
                console.log("_fixButtonSpaceKeydown()");
                if(removeBinding){
                    jQuery(elem).off('keydown');
                } else {
                    jQuery(elem).on('keydown', function (e) {
                        if (e.keyCode == 32) {
                            console.log('Caught space!');
                            e.preventDefault();
                        }
                    });
                }
            }

Has anyone come across this w/ CKEditor before, and have they found a solution?

http://stackoverflow.com/questions/3859170/how-to-use-jquery-to-prevent-the-space-key-from-entering-a-space — Allen Chak, Apr 14 '14 at 04:02
You can use constant to detect the keycode. $.ui.keyCode.SPACE, more detail: http://api.jqueryui.com/jQuery.ui.keyCode/ — Allen Chak, Apr 14 '14 at 04:23
@AllenChak, I'm already detecting the keycode correctly. The problem is with getting CKEditor to insert a space, while at the same time preventing the browser from trying to "push" the button instead. I'm already successfully doing the latter w/ preventDefault, but I suspect that by doing so, I'm also keeping CKEditor from inserting the space. Also, I'm not installing another library, just to have a constant for the space keycode. 32 works just fine. — RavenHursT, Apr 14 '14 at 04:30

score 2 · Accepted Answer · answered Apr 23 '14 at 17:33

Below workaround won't stop onclick() on Chrome while focusing on a button and type space. This is a browser issue and it seems there's no way to totally prevent the event. Anyway, we can still add space(Make sure to insert HTML encoding) at the cursor position:

jQuery(contentEditableBtn).attr('onclick','event.preventDefault(); insertSpace();');

function insertSpace(){
 var range, node;
if (window.getSelection && window.getSelection().getRangeAt) {
            range = window.getSelection().getRangeAt(0);
            node = range.createContextualFragment("&nbsp;");
            range.insertNode(node);
            window.getSelection().collapseToEnd();
            window.getSelection().modify("move", "forward", "character");
        } else if (document.selection && document.selection.createRange) {
            document.selection.createRange().pasteHTML("&nbsp;");
            document.selection.collapseToEnd();
            document.selection.modify("move", "forward", "character");
        };
}

score 1 · Answer 2 · answered Apr 18 '14 at 11:22

Maybe you could manually insert a space after preventDefault(). I'm not sure if this would work, but it's worth a try:

var _fixButtonSpaceKeydown = function(elem, removeBinding){
                console.log("_fixButtonSpaceKeydown()");
                if(removeBinding){
                    jQuery(elem).off('keydown');
                } else {
                    jQuery(elem).on('keydown', function (e) {
                        if (e.keyCode == 32) {
                            console.log('Caught space!');
                            e.preventDefault();
                            e.target.innerHTML += ' ';
                        }
                    });
                }
            }

Thanks, but your code would only append a space to the end of the innerHTML.. the space needs to be inserted wherever cke's cursor is at. — RavenHursT, Apr 18 '14 at 15:55

score 0 · Answer 3 · answered Apr 23 '14 at 05:44

Try this: I haven't tested it but I'm sure you can add space by getting the cursor position where a char is then add a space before the char and replace the paragraph. Something like this:

var _fixButtonSpaceKeydown = function(elem, removeBinding){
                console.log("_fixButtonSpaceKeydown()");
                if(removeBinding){
                    jQuery(elem).off('keydown');
                } else {
                    jQuery(elem).on('keydown', function (e) {
                       var p = "";

                        if (e.keyCode == 32) {
                            console.log('Caught space!');
                            e.preventDefault();
                            p = e.target.innerHTML;
                       // get position of cursor
                       var cursorPosition = window.getSelection().getRangeAt(0).startOffset;
                           p.replace(p.charAt(position), " " + p.charAt(position));
                          // replace the content after change
                          e.target.innerHTML = p;
                        }
                    });
                }
            }

CKEditor no space on buttons

3 Answers3