Ckeditor5: HTML output stripped from styling, resulting in different document

Created on 9 Sep 2020 · 4Comments · Source: ckeditor/ckeditor5

📝 Provide detailed reproduction steps (if any)

Sample input HTML doc:

<html>

<head>
    <style>
        .htmlGenerated {
            font-family: 'Times New Roman';
            font-size: 14px;
        }

        .htmlGenerated * {
            line-height: 16px;
            text-indent: 0;
        }

        .htmlGenerated p {
            margin: 0;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
        }

        ;
    </style>
</head>

<body>
    <div class="htmlGenerated">
        <p style="text-align: center;">&nbsp;</p>
        <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span>Load</span>&nbsp;<br /><span style="font-style: normal;"><span>My
                                Street</span><br /><span>582934</span>&nbsp;</span></span></span></span></p>
        <p dir="ltr" style="margin-left: 360px; text-align: right;"><span
                style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;">A l’attention
                            de</span></span><br /><span style="color:#000000;"><span></span></span></span></span></p>
        <p dir="ltr" style="color: rgb(0, 0, 0); font-style: normal; margin-left: 360px; text-align: right;"><span
                style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;"><span>Destiny</span><span
                                style="font-style: normal;">&nbsp;</span></span></span></span></span></p>
        <p dir="ltr" style="margin-left: 360px; text-align: right;"><span
                style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span>Manager</span></span></span></span></p>
        <p dir="ltr" style="margin-left: 360px; text-align: right;"><span
                style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;"><span>Enterprise
                                Dr</span><br /><span>52344</span>&nbsp;</span></span></span></span></p>
        <div dir="ltr" style="margin-left: 360px; text-align: right;">&nbsp;</div>
        <p dir="ltr" style="margin-left: 360px; text-align: right;"><span
                style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;">Le&nbsp;</span><span>02 d&eacute;cembre
                            2022</span></span></span></span></p>
        <p dir="ltr" style="margin-left: 360px; text-align: right;"><span
                style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span
                            style="font-style: normal;">A&nbsp;</span><span>Lieu</span></span></span></span></p>
        <div dir="ltr">&nbsp;</div>
        <p dir="ltr"><strong><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                            style="color:#000000;"><span rl-text="content2" style="font-style: normal;">Lettre
                                recommandée avec accusé de réception</span></span></span></span></strong></p>
        <div dir="ltr">&nbsp;</div>
        <p dir="ltr"><strong><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                            style="color:#000000;"><span style="font-style: normal;">Objet&nbsp;: demande de congé
                                sabbatique</span></span></span></span></strong></p>
        <div dir="ltr">&nbsp;</div>
        <div dir="ltr">&nbsp;</div>
        <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        rl-text="content5">Monsieur,</span>&nbsp;</span></span></p>
        <p dir="ltr">&nbsp;</p>
        <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;">Je vous informe de mon intention de
                            prendre un congé sabbatique dans les conditions prévues par le&nbsp;code du
                            travail.</span></span></span></span></p>
        <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;">Je souhaiterais bénéficier de ce congé
                            à compter du&nbsp;<span>02 d&eacute;cembre 2022</span>&nbsp;pour une durée
                            de&nbsp;</span><span>6 mois</span><span
                            style="font-style: normal;">.</span></span></span></span></p>
        <div rl-text="content5">
            <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                            style="color:#000000;"><span style="font-style: normal;">Au cours de ce congé, je vous
                                informe que j'envisage d'exercer une activité
                                de&nbsp;<span>Activity</span>.</span>&nbsp;</span></span></span></p>
        </div>
        <p dir="ltr">&nbsp;</p>
        <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span style="font-style: normal;">Je vous prie
                            d’agréer,&nbsp;</span></span><span rl-text="content5">Monsieur,</span>&nbsp;<span
                        style="color:#000000;"><span style="font-style: normal;">l’expression de ma considération
                            distinguée.</span></span></span></span></p>
        <div dir="ltr">&nbsp;</div>
        <div dir="ltr"><span style="font-size:14px;">Signature</span></div>
        <p dir="ltr"><span style="font-family:times new roman,times,serif;"><span style="font-size:14px;"><span
                        style="color:#000000;"><span
                            style="font-style: normal;"><span>Load</span>&nbsp;</span></span></span></span></p>
        <p dir="ltr">&nbsp;</p>
        <div dir="ltr"><br />&nbsp;</div>
        <p dir="ltr" style="color: rgb(0, 176, 240); font-style: italic;">&nbsp;</p>
        <p dir="ltr" style="color: rgb(0, 176, 240); font-style: italic;">&nbsp;</p>
    </div>
</body>

</html>

Add the sample above into CKEditor5
Change just one word
Get the output via editor.getData()

✔️ Expected result

The output should be the same with the exception of the content that you changed.
However, as seen below, it contains only what's in the body, and the elements are stripped from their inlined styles.

❌ Actual result

The output is entirely stripped from all styles, meaning that the HTML document does not render in the same way as before.

<p style="text-align:center;">&nbsp;</p>
    <p>Load&nbsp;ASDF<br>My Street<br>582934&nbsp;</p>
    <p style="margin-left:360px;text-align:right;">A l’attention de<br>&nbsp;</p>
    <p style="margin-left:360px;text-align:right;">Destiny&nbsp;</p>
    <p style="margin-left:360px;text-align:right;">Manager</p>
    <p style="margin-left:360px;text-align:right;">Enterprise Dr<br>52344&nbsp;</p>
    <p style="margin-left:360px;text-align:right;">Le&nbsp;02 décembre 2022</p>
    <p style="margin-left:360px;text-align:right;">A&nbsp;Lieu</p>
    <p><strong>Lettre recommandée avec accusé de réception</strong></p>
    <p><strong>Objet&nbsp;: demande de congé sabbatique</strong></p>
    <p>Monsieur,&nbsp;</p>
    <p>&nbsp;</p>
    <p>Je vous informe de mon intention de prendre un congé sabbatique dans les conditions prévues par le&nbsp;code du
        travail.</p>
    <p>Je souhaiterais bénéficier de ce congé à compter du&nbsp;02 décembre 2022&nbsp;pour une durée de&nbsp;6 mois.</p>
    <p>Au cours de ce congé, je vous informe que j'envisage d'exercer une activité de&nbsp;Activity.&nbsp;</p>
    <p>&nbsp;</p>
    <p>Je vous prie d’agréer,&nbsp;Monsieur,&nbsp;l’expression de ma considération distinguée.</p>
    <p>Signature</p>
    <p>Load&nbsp;</p>
    <p>&nbsp;</p>
    <p><br>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

📃 Other details

Browser: G Chrome
OS: Windows 10
CKEditor version: 5
Installed CKEditor plugins: All standard

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

expired question

Source

ljupcospeci

👍6

Most helpful comment

By default, no. You need to manually change it, as stated in the docs I linked above.

FilipTokarski on 16 Sep 2020

👍2

All 4 comments

Wonder what's going wrong here!

osheikhy on 10 Sep 2020

Hi, thanks for the report. CKEditor 5 has it's own data model and it doesn't support all tags and attributes by default - hence, it normalizes all unknown elements into those, that are already defined. If you need some custom behavior, please also see docs on preserving custom content and custom element conversion.

FilipTokarski on 10 Sep 2020

Is there a way to tell CKEditor to preserve everything by default (without setting up specific custom flags for each element/tag/attribute) ?

ljupcospeci on 15 Sep 2020

By default, no. You need to manually change it, as stated in the docs I linked above.

FilipTokarski on 16 Sep 2020

👍2

Was this page helpful?

0 / 5 - 0 ratings