Question

我在我正在使用的“WYSIWYG”内容编辑器中使用CKEditor的CKEDITOR.inline（元素）功能（contenteditable = true）。这个东西适用于我测试过的各种标签，除了：

当我去编辑<button>时，我可以编辑标签内的文字，就好了，除之外的“空格”。

当我点击空格键时，而不是在文本中插入空格字符，按钮会尝试“按下”，因为，我假设浏览器的默认功能是尝试“按下”按钮这是重点。

所以..我试图“高举”$(element).on('keydown')事件并检查键码32以将preventDefault应用于该事件。这在技术上有助于“劫持”（我可以看到下面的console.log），但我仍然没有在内容中获得“空间”。

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

之前有没有人遇到过这个w / CKEditor，他们找到了解决方案吗？

Answer 1

下面的解决方法是在Chrome上停止onclick（），同时专注于按钮和类型空间。这是一个浏览器问题，似乎没有办法完全阻止该事件。无论如何，我们仍然可以在光标位置添加空格（确保插入HTML编码）：

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

Answer 2

也许您可以在preventDefault()之后手动插入空格。我不确定这是否有效，但值得一试：

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

Answer 3

试试这个：我还没有对它进行过测试，但我确定你可以通过获取char所在的光标位置来添加空间，然后在char之前添加一个空格并替换段落。像这样：

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按钮上没有空格

3 个答案: