CKEditor moving br tags

359 Views Asked by At

I'm having a problem with CKEditor changing my original paragraph formatting with negative side effects.

I start with a basic paragraph loaded into CKEditor using setData():

<p><span style="font-size:50px">My Text</span></p>
... more document content ...

In the editor, I move the cursor to the end of the phrase "My Text" and press enter (with config.enterMode=CKEDITOR.ENTER_BR setting enabled). Inspecting the markup inside the editor I now see:

<p><span style="font-size:50px">My Text<br><br></span></p>
... more document content ...

Then, when I call getData() to pull the contents from the editor and save the document to a database, the HTML extracted by getData() looks like this:

<p><span style="font-size:50px">My Text</span><br>&nbsp;</p>
... more document content ...

This is a problem because while editing, the <br> tag was inside the <span> and was subject to the 50px font size style. The user saw a 50px blank line before the next piece of document content. After saving the HTML to a database and reloading later the <br> tag is now outside the <span> and is not subject to the 50px font sizing and the blank line appears much smaller than before.

The round trip fidelity of the text formatting is not preserved and the user is frustrated by the results.

Can someone help me understand the results I'm seeing with <br> tags being reformatted and moved around during the editing life cycle, and how I might fix this problem?

Using CKEditor v4.4.1

0

There are 0 best solutions below