Finding Touched elments CKEDITOR

Question

I am looking several days now on the web, but i can't seem to find out, how i can find if the caret is touching a element. Let me explain myself a little better with this example.

This is a[ ] <span>example</span>

As Example we say that the caret is the tag [ ]. And now we like to know if the caret is near a span element? How can we find this? Also I need to know if the span element is before or after the caret.

I'm doing this with the CKEDITOR 4.0 api..

Answer 1

Try this:

var range = CKEDITOR.instances.yourEditorInstance.getSelection().getRanges()[ 0 ];
range.optimize();
console.log( range.getBoundaryNodes() );

Also:

console.log( range.getTouchedEndNode() );
console.log( range.getTouchedStartNode() );

Note that your range may be located inside of an element (like e4, image below), so boundary nodes will always be text nodes. Check DOM range specification for more.

---

EDIT: These are also worth trying:

range.getNextNode();
range.getPreviousNode();

---

After all, once you have the node, you can check it:

var node = range.getNextNode();
console.log( node.type == CKEDITOR.NODE_ELEMENT && node.is( 'span' ) );