CKEditor 5 HTML normalization leading to bugs/unwanted html modification

Open andybayer-grp opened this issue 1 year ago • 1 comments

📝 Provide detailed reproduction steps (if any)

When typing in the main editor, not in source mode, if i type in $> then change to source mode the $> is changed to </body>gt; . Seemingly this is because the > is changed to > and then seemingly the verion 5 html normalization model changes $& to </body> so $> becomes </body>gt;.
So my original html that i pass into the editor is: "<html><head><title></title></head><body><style>#activate a,#activate a:hover {color: #ffffff!important;text-decoration: none!important;text-decoration-color: #ffffff!important;}</style><p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Hello, <$FirstName$>. </p><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><table border="0" cellspacing="0" cellpadding="0" id="activate"><tr><td align="center" style="border-radius: 3px;" bgcolor="#ff8820"><a title="Activate" href="<$Link$>" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff !important; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 12px 18px; border: 1px solid #ff8820; display: inline-block;"><span style="color:#FFFFFF !important;">Click here to begin ►</span></a></td></tr></table></td></tr></table><p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Have a good day</p></body></html>"

Then when i click source mode i see:

<html><head><title></title></head><body><style>#activate a,#activate a:hover {color: #ffffff!important;text-decoration: none!important;text-decoration-color: #ffffff!important;}</style>
<p style="font-family:Helvetica, Arial, sans-serif;font-size:16px;">
    Hello, &lt;$FirstName</body>gt;.
</p>
<figure class="table">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td>
                    <figure class="table">
                        <table border="0" cellspacing="0" cellpadding="0" id="activate">
                            <tbody>
                                <tr>
                                    <td style="border-radius:3px;text-align:center;" bgcolor="#ff8820">
                                        <a style="border-radius:3px;border:1px solid #ff8820;color:#ffffff !important;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:16px;padding:12px 18px;text-decoration:none;" href="<$Link$>" title="Activate" target="_blank"><span style="color:#FFFFFF!important;">Click here to begin ►</span></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </figure>
                </td>
            </tr>
        </tbody>
    </table>
</figure>
<p style="font-family:Helvetica, Arial, sans-serif;font-size:16px;">
    Have a good day
</p>
</body></html>

NOTE: This is only when running full page plugin but we need full page html.

✔️ Expected result

I would expect <$FirstName$> to be <$FirstName$> in source mode
 is completely removed and shouldnt be
The final html source and data i get from editor.getData() i would expect to be:

<html>
<head>
	<title></title>
</head>
<body>
<style type="text/css">#activate a,#activate a:hover {color: #ffffff!important;text-decoration: none!important;text-decoration-color: #ffffff!important;}
</style>
<p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Hello, &lt;$FirstName$&gt;.</p>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td>
			<table border="0" cellpadding="0" cellspacing="0" id="activate">
				<tbody>
					<tr>
						<td align="center" bgcolor="#ff8820" style="border-radius: 3px;"><a href="&lt;$Link$&gt;" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff !important; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 12px 18px; border: 1px solid #ff8820; display: inline-block;" target="_blank" title="Activate"><span style="color:#FFFFFF !important;">Click here to begin ►</span></a><!-- _!txtlnk!_ <$SubLink$> --></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

<p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Have a good day</p>
</body>
</html>

❌ Actual result

<$FirstName$> becomes <$FirstName</body>gt; in source mode
 is completely removed and shouldnt be
Source code is normalized in ways we dont want it to be.

❓ Possible solution

Change HTML normalization to avoid these unwanted changes.

📃 Other details

Browser: Chrome
First affected CKEditor version: unsure first but we are using "ckeditor5": "^43.2.0" - but an old project we have is using ckeditor4 and it works as expected/doesnt cause HTML normalization issues
Installed CKEditor plugins: plugins: [ AccessibilityHelp, Alignment, Autoformat, AutoImage, Autosave, BlockQuote, Bold, CloudServices, Code, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, FullPage, GeneralHtmlSupport, Heading, ImageBlock, ImageCaption, ImageInline, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, SelectAll, SourceEditing, Strikethrough, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextPartLanguage, TextTransformation, TodoList, Underline, Undo ],

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

Nov 13 '24 16:11 andybayer-grp

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

Dec 05 '25 23:12 CKEditorBot