Inserting ordered or unordered lists in custom rich text editor breaks the dom

Question

I have a div that is part of a custom web part. Once a user clicks an edit-button I want the div to turn into a rich text field to allow the user to edit the contents as they would edit any rich text field in a page.

Currently I'm able to create the rich text field using:

RTE.Canvas.makeRegionEditable($('editorDiv')[0]);

But when the user tries to insert an ordered or unordered list (or apply indentation) from the ribbon the dom breaks. The rich text editor element is moved up two nodes in the hierarchy and some of the surrounding dom nodes are duplicated.

How can I fix this?

Answer 1

It seems I have to have an empty div below the div that will become a rich text editor field.

If my dom looks like this:

<div class="editorContainer">
    <div></div>
</div>

And I call:

RTE.Canvas.makeRegionEditable($('editorContainer').children()[0]);

I get the behaviour described in the comment above. However if I insert an additional div in the html like so:

<div class="editorContainer">
    <div></div>
    <div></div>
</div>

It works fine. Why it would be required I don't know and I couldn't find any documentation on it.