CKEditor disable auto-editing HTML code

Question

I need in one of my CKEditors to disable autoediting code. If I put this code as HTML:

<div class="kontaktJeden">
                <div class="obr">
                    <img src="images/insol.png" alt="">
                </div>
                <div class="text">
                    <table>
                        <tr><td><span class="meno"><strong>Text.</strong></span></td></tr>
                        <tr><td><span class="text">Text</span></td></tr>
                        <tr><td><span class="ico"><img src="images/ico.png" alt="">Text</span></td></tr>
                        <tr><td><span class="dic"><img src="images/dic.png" alt="">Text</span></td></tr>
                <!--         <tr><td><span class="mob"><img src="images/phone.png" alt="">Text</span></td></tr> -->
                        <tr><td><span class="mail"><img src="images/mail.png" alt="">Text</span></td></tr>
                        <!-- <tr><td><a href=""><img src="images/fb.png" alt=""></a><a href=""><img src="images/yt.png" alt=""></a></td></tr> -->
                    </table>
                </div>

CKEditor will change it to:

<table>
    <tbody>
        <tr>
            <td><strong>Text.</strong></td>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
        <tr>
            <td><img alt="" src="images/ico.png" />Text</td>
        </tr>
        <tr>
            <td><img alt="" src="images/dic.png" />Text</td>
        </tr>
        <!--         <tr><td><span class="mob"><img src="images/phone.png" alt="">Text</span></td></tr> -->
        <tr>
            <td><img alt="" src="images/mail.png" />Text</td>
        </tr>
        <!-- <tr><td><a href=""><img src="images/fb.png" alt=""></a><a href=""><img src="images/yt.png" alt=""></a></td></tr> -->
    </tbody>
</table>

automatically. How can I disable it?

Thanks for any answer.

Reinmar Reinmar · Accepted Answer · 2013-08-22T06:27:33

You cannot switch this off. There are reasons why CKEditor reformats your data:

It needs to parse it to fix issues, because it needs to have valid source while editing.
It needs to process your data, because your data needs to be adapted for editing in contenteditable.
It passes your data through browser's DOM, so formatting is lost, because DOM does not keep it.

From the source you posted, you only can keep your classes and divs (if that was your problem). They are stripped by CKEditor because they are not allowed. Read about the Advanced Content Filter which settings you can extend using config.extraAllowedContent.

CKEditor disable auto-editing HTML code

2 Answers