Cursor focus in DIV

[Mike Davies]

I have a template, which can be inserted from the template icon, which is contained in a div tag:

<div class="property"> <img style="margin-right: 10px" height="100" width="100" align="left"/> <h3>'Type the title here'</h3> <p>'Type the text here'</p> </div>

If I try to insert a second template it is inserted within the first div tag:

<div class="property"> <img style="margin-right: 10px" height="100" width="100" align="left"/> <h3>'Type the title here'</h3> <p>'Type the text here'</p>

<div class="property"> <img style="margin-right: 10px" height="100" width="100" align="left"/> <h3>'Type the title here'</h3> <p>'Type the text here'</p> </div>

</div>

I want to insert it after the first div tag but am unable to move the cursor focus outside the first div.

The same, or very similar, issue has been reported on the forum at ​http://ckeditor.com/forums/CKEditor/Issue-in-generating-markup so I suspect it is probably a general issue rather than specific to templates.

[Piotrek Koszuliński]

This is not an issue caused by editor. This is a nature of DOM and contenteditable. As I explained in that thread - there needs to be a non-empty container below/above the first inserted div to be able to move selection there.

[Piotrek Koszuliński]

BTW. I'm not sure whether you're trying to move the caret manually or from code, but if manually, then you'll be interested in magicline (​http://ckeditor.com/demo#magic-line) which is a very useful tool created exactly for this purpose.