My goal is to set the caret position to the current mouse position.
I'm aware of the selectRanges API:
but looking at ranges returned via editor.getSelection().getRanges()[0], the range could have a startContainer of text or element (i'm guessing this corresponds to the source code variables CKEDITOR.SELECTION_TEXT and CKEDITOR.SELECTION_ELEMENT) . If the start container is text, the offset relates to each character within the Text. If the start container is an element (htmlbodyelement), the offset relates to the number of elements which could include a Text object (?)
To set the caret using the range API, the setStart method may be used requiring a node parameter:
This node can be created from a dom node on a mouse event:
The problem with the above code is that the dom event doesn't return text nodes. It will return the BODY element if clicking on a piece of text. What is needed is both the CKEDITOR.SELECTION_TEXT node and the character position within that node as it relates to the mouse event.
So:
1) How do you find the both SELECTION_ELEMENT and SELECTION_TEXT type objects from the mouse event?
2) If you were to find a SELECTION_TEXT type object from the mouse event, how would you also get the character position within that text according to the mouse position?
I'm aware of the selectRanges API:
var ranges = new CKEDITOR.dom.range( editor.document ); editor.getSelection().selectRanges( [ ranges ] );
but looking at ranges returned via editor.getSelection().getRanges()[0], the range could have a startContainer of text or element (i'm guessing this corresponds to the source code variables CKEDITOR.SELECTION_TEXT and CKEDITOR.SELECTION_ELEMENT) . If the start container is text, the offset relates to each character within the Text. If the start container is an element (htmlbodyelement), the offset relates to the number of elements which could include a Text object (?)
To set the caret using the range API, the setStart method may be used requiring a node parameter:
var range = new CKEDITOR.dom.range( editor.document ); range.setStart(node, offset); range.collapse();
This node can be created from a dom node on a mouse event:
editor.document.on('mouseup', function(e) { var domNode = e.data.$.target; var range = new CKEDITOR.dom.range( this.document ); range.setStart(new CKEDITOR.dom.node(domNode), 0); range.collapse(); var ranges = []; ranges.push(range); this.getSelection().selectRanges( ranges ); });
The problem with the above code is that the dom event doesn't return text nodes. It will return the BODY element if clicking on a piece of text. What is needed is both the CKEDITOR.SELECTION_TEXT node and the character position within that node as it relates to the mouse event.
So:
1) How do you find the both SELECTION_ELEMENT and SELECTION_TEXT type objects from the mouse event?
2) If you were to find a SELECTION_TEXT type object from the mouse event, how would you also get the character position within that text according to the mouse position?
Re: set caret position
instead of
Re: set caret position
I should clarify question 1. I can find the TEXT and ELEMENT child nodes are in the mouse event target (which is the body when clicking on text in the body) but there doesn't seem to be any attached data which would indicate the child node where the mouse what clicked or what the offset character might be.
Based on the fact that the mouse event contains this child node list data, it appears that CKEditor is providing this data, which suggests to me that it might also be able to supply the Text node and character position which was clicked.
Re: set caret position
Re: set caret position
I hope http://cksource.com/forums/viewtopic.php?f=11&t=24137 will be useful.