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..
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' ) );