Skipping an element in CKEditor

Question

Let's say we have the following text and caret position:

foo |bar baz

and the HTML code is

foo <span>bar</span> baz

and user pressed the right arrow key. What happens is that the caret now moved inside of the span between the letters b and a of bar.

I would like CKEditor to automatically skip a certain element (for example all spans) and jump behind it so the result would be:

foo bar| baz

Is this possible by only fiddling with the configuration? If so, what do I need to set? I wasn't able to find settings like these mentioned in the documentation. Or do I have to alter the CKEditor source code to be able to do stuff like this?

Answer 1

Important thing is that CKEditor is not responsible for caret movements. At least this is true in most cases, because there are some where it takes matters in its own hands. In all other cases it's your browser what moves the caret so you would need to alter its behaviour. This is doable and it simply requires writing a keydown listener which will discover when a certain situation happens and set selection in your chosen location. However, that's not all, because user may also place caret inside such <span> by clicking or by dragging. So there's a little (well... "little") bit more to do.

Another solution is to use non-editable islands which in CKEditor are called widgets. I'm not sure if this is what you want to achieve, but perhaps placeholders are what you're looking for.

If you want to read more about widgets in general see – Introduction to Widgets.