CKEditor converts input source

Question

I have CKEditor on my web site. When I enter this code into source window:

<ul class="active">
   <li>
        <a href="#">
            <img align="" alt="" border="0" src="/media/1.png" /> 
            <h3>Headline</h3>
            <span class="prec">from</span> 
            <span class="price">1</span>
        </a>
   </li>
</ul>

And then when I click Save it gets formatted to:

<ul class="active">
    <li>
        <a href="#"><img align="" alt="" border="0" src="/media/1.png" /> </a>
        <h3>
            <a href="#">Headline</a></h3>
        <a href="#"><span class="prec">from</span> <span class="price">1</span> </a></li>
</ul>

Is it possible to completely turn off code reformatting? It also changes some other html codes (flash on page, for example)

Can anybody give me some advice?

Are you sure "Headline" gets wrapped in an `` tag? – Wolfram Jul 29 '12 at 17:10 — Wolfram, Jul 29 '12 at 17:10
yes. this is copy/paste from editor. – mikipero Jul 29 '12 at 17:15 — mikipero, Jul 29 '12 at 17:15

score 0 · Accepted Answer · edited May 23 '17 at 10:24

There is documentation on formatting the HTML output. CKEDITOR.htmlWriter handles the writing of source HTML. Its options are summarized in the docs. For example you can turn on breaking inside an <a> like this:

writer.setRules( 'a', {breakAfterOpen : true, breakBeforeClose: true} );

That way you should at least be able to get the editor to not put everything inside your anchors in one line.

However, I think you are looking for something like sourceFormatting: none but I doubt that this exists. The editor needs to parse your HTML for validation and its WYSIWYG functionality, so it seems to always get evaluated on save, stored formatless and re-written in the source window when it is opened.

In another question people try (mis-)using protectedSource to keep CKEditor off their HTML, but I did not try that.

score 0 · Answer 2 · answered Jul 29 '12 at 17:41

Part of your problem is that your input HTML is invalid. <h3> is a block-level element; it cannot appear inside an inline element like <a>. The browser cannot display this invalid HTML, so it's reformatting it to be valid (by duplicating the <a> tag), and CKEditor is just going along for the ride.

There's a little bit of extra reformatting being done around whitespace and newlines, but most of the changes you're seeing are related to this syntactical issue.

In html5 this is perfectly valid, which is why most users want to disable the reformat as it doesn't handle html5 yet. — Shannon Hochkins, Jul 27 '14 at 22:35

CKEditor converts input source

2 Answers2