Search code examples
ckeditor

How to prevent CKEditor from changing tag order

CKEditor transforms the following code :

<h3>H3  
<ul>
    <li>el 1</li>
    <li>el 2</li>
</ul></h3>

to

    <h3>H3  </h3> 
<ul>
    <li>el 1</li>
    <li>el 2</li>
</ul>

Is there a way to prevent this behavior?

Solution

  • TL;DR; no

    CKEditor is an HTML4/xHTML editor and is based on DTD, which gives a complete set of rules regarding which tags are available and where/how they can appear inside the DOM.

    If you will check the DTD you can see that H3 is a heading tag (which is a block) that can have only inline tags inside.

    <!ENTITY % heading "h1|h2|h3|h4|h5|h6">
....
<!ENTITY % block
"p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">
....
<!ELEMENT h3 %Inline;>
<!ATTLIST h3
    %attrs;
    %TextAlign;
>

    The ul tag is also a block tag, so it can't appear inside h3 tag:

    <!ENTITY % lists "ul | ol | dl | menu | dir">
....
<!ENTITY % block
"p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">