1

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?

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.