RavenHursT
RavenHursT

Reputation: 2344

CKEditor no space on buttons

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?

Upvotes: 2

Views: 1023

Answers (3)

Nocturne
Nocturne

Reputation: 86

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");
        };
}

Upvotes: 2

techprd.com
techprd.com

Reputation: 96

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;
                        }
                    });
                }
            }

Upvotes: 0

miller9904
miller9904

Reputation: 109

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 += ' ';
                        }
                    });
                }
            }

Upvotes: 1

Related Questions