Reputation: 2344
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
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(" ");
range.insertNode(node);
window.getSelection().collapseToEnd();
window.getSelection().modify("move", "forward", "character");
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(" ");
document.selection.collapseToEnd();
document.selection.modify("move", "forward", "character");
};
}
Upvotes: 2
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
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