Opened 6 months ago

Closed 4 months ago

#16873 closed Bug (duplicate)

[chrome] Tab based navigation - No caret / focus in element?

Reported by: abayob Owned by:
Priority: Normal Milestone:
Component: General Version: 4.6.2
Keywords: Cc:

Description

Heya,

I am using the new CKEditor version because of the lovely moono-lisa skin. I came from using an older version: 4.5.7.

I am using a few plugins to create an inline + shared editor. The build files of each are included in this post.

The code to initialize a single editor field is:

var editor = CKEDITOR.inline(
       uniqueNumber, 
       {
          customConfig: '/dist/ckeditor/builder-config.js?v2',
                    
          sharedSpaces: {
             top: top_id,
             bottom: bottom_id
        },
           colorButton_colors: #fff, #000, etc...
   })

Steps to reproduce

  1. First let ckeditor initialize the inline shared editor
  2. Then start tabbing from one text element (contenteditable) to another
  3. The next text field will have no caret visible and apparently no focus.
  4. When trying to tab to the next, an error is thrown:

Expected result

When you tab from one to the next, a caret should appear in the start of the text area

Actual result

Nothing visible (focus line does appear) and typing does nothing. Also when tabbing to a next text area, an error is thrown

Other details (browser, OS, CKEditor version, installed plugins)

Version 4.5.7 does not have this issue? Tabbing in all browsers works fine in this release!

Attachments (4)

builder-config.js (3.4 KB) - added by abayob 6 months ago.
builder-config.js version 4.5.7
builder-config.2.js (4.3 KB) - added by abayob 6 months ago.
builder-config version 4.6.2
build-config.js (2.5 KB) - added by abayob 6 months ago.
build file 4.5.7
build-config.2.js (2.5 KB) - added by abayob 6 months ago.
build file 4.6.2

Download all attachments as: .zip

Change History (7)

Changed 6 months ago by abayob

Attachment: builder-config.js added

builder-config.js version 4.5.7

Changed 6 months ago by abayob

Attachment: builder-config.2.js added

builder-config version 4.6.2

Changed 6 months ago by abayob

Attachment: build-config.js added

build file 4.5.7

Changed 6 months ago by abayob

Attachment: build-config.2.js added

build file 4.6.2

comment:1 Changed 6 months ago by abayob

Forgot to include the error message:

Uncaught TypeError: Cannot read property 'contains' of null                ckeditor.js at 842
    at f.getContext (ckeditor.js?v4.6:842)
    at f.<anonymous> (ckeditor.js?v4.6:852)
    at a.p (ckeditor.js?v4.6:10)
    at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?v4.6:12)
    at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js?v4.6:13)
    at CKEDITOR.keystrokeHandler.d (ckeditor.js?v4.6:241)
    at f.p (ckeditor.js?v4.6:10)
    at f.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?v4.6:12)
    at HTMLDivElement.<anonymous> (ckeditor.js?v4.6:62)

comment:2 Changed 6 months ago by abayob

I have found a workaround for now:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) {
    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        var selected = $('.some-selector:focus');
        if (code == 9 && selected.length) {
            if(!document.getSelection().anchorNode) setSelectionRange(selected[0], 0, 0);
        }
    });
}

The setSelectionRange functions looks as following:

/**
* Sets the selection in an element to a given position,
* If start and end are the same, the caret position is set.
* @param {object} el    JavaScript node object where the selection is set in
* @param {integer} start Starting position
* @param {integer} end   Ending position
*/
setSelectionRange: function (el, start, end) {
if (document.createRange && window.getSelection) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var textNodes = Abayo.ckeditor.getTextNodesIn(el);
    var foundStart = false;
    var charCount = 0, endCharCount;

    for (var i = 0, textNode; textNode = textNodes[i++]; ) {
        endCharCount = charCount + textNode.length;
        if (!foundStart && start >= charCount
                && (start < endCharCount ||
                (start == endCharCount && i <= textNodes.length))) {
            range.setStart(textNode, start - charCount);
            foundStart = true;
        }
        if (foundStart && end <= endCharCount) {
            range.setEnd(textNode, end - charCount);
            break;
        }
        charCount = endCharCount;
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(true);
    textRange.moveEnd("character", end);
    textRange.moveStart("character", start);
    textRange.select();
}
}, 

/**
* Function to return only the text nodes that are nested into the given node
* @param  {object} node JavaScript node object
* @return {array}      Array of text node objects
*/
getTextNodesIn: function(node) {
var textNodes = [];
if (node.nodeType == 3) {
    textNodes.push(node);
} else {
    var children = node.childNodes;
    for (var i = 0, len = children.length; i < len; ++i) {
        textNodes.push.apply(textNodes, Abayo.ckeditor.getTextNodesIn(children[i]));
    }
}
return textNodes;
}

comment:3 Changed 4 months ago by Jakub Ś

Keywords: tab navigation focus caret removed
Resolution: duplicate
Status: newclosed

This is most likely a duplicate of #16809.

@abayob please provide reduced HTML page you use so that I could try reproducing this issue with default CKEditor. Maybe your scenario has something special which was missed in #16809.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy