Render <style> element in <head> while using FullPage and General HTML Support plugins #13482
Description
The workaround solution has been proposed in the comment below - #13482 (comment).
Original report
📝 Description
We are currently evaluating the new FullPage plugin together with GeneralHtmlSupport as an replacement for CKEditor4. While the output now correctly includes the complete document, the css styles from the head are not applied in the editor. Inline styles are applied correctly.
ClassicEditor.create(document.querySelector("#editor"), {
plugins: [ Essentials, Paragraph, Bold, Italic, SourceEditing, GeneralHtmlSupport, FullPage, Alignment, FontColor, FontSize ],
toolbar: ["heading", "|", "fontColor", "fontSize", "|", "bulletedList", "numberedList", "alignment", "undo", "redo", "|", "bold", "italic", "sourceEditing"],
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true,
},
],
},
})✔️ Expected result
This is how the example document is rendered in a browser:
❌ Actual result
Inline styles are applied correctly. CSS from the head is not applied.
📃 Other details
Version
"@ckeditor/ckeditor5-alignment": "36.0.0",
"@ckeditor/ckeditor5-basic-styles": "36.0.0",
"@ckeditor/ckeditor5-dev-utils": "33.0.0",
"@ckeditor/ckeditor5-editor-classic": "36.0.0",
"@ckeditor/ckeditor5-essentials": "36.0.0",
"@ckeditor/ckeditor5-font": "36.0.0",
"@ckeditor/ckeditor5-html-support": "36.0.0",
"@ckeditor/ckeditor5-paragraph": "36.0.0",
"@ckeditor/ckeditor5-source-editing": "36.0.0",
"@ckeditor/ckeditor5-theme-lark": "36.0.0",
Example Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">h1 {
color: #222222;
font-family: Arial;
font-size: 40px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
text-align: center;
mso-line-height-rule:exactly;
}
p {
margin: 1em 0;
padding: 0;
font-family: Arial;
font-size: 14px;
color: #606060;
}
h2 {
color: #FFFFFF;
text-decoration: none;
font-family: Arial;
font-size: 22px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
text-align: left;
padding-bottom: 30px;
mso-line-height-rule:exactly;
}
h3 {
color: #444444;
font-family: Arial;
font-size: 16px;
font-style: normal;
font-weight: bold;
line-height: 150%;
letter-spacing: normal;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
mso-line-height-rule:exactly;
}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%;}
.ExternalClass {width: 100%;}
}
</style>
</head>
<body>
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="height:100%; width:650px">
<tbody>
<tr>
<td align="center" id="title">
<h1>AbaDemoNews</h1>
</td>
</tr>
<tr>
<td align="center" id="time">
<p>[Systemvariablen.Tagesdatum]</p>
</td>
</tr>
<tr>
<td align="center" id="entrance" style="background-color:#de323c; padding-bottom:50px; padding-left:20px; padding-right:20px; padding-top:50px">
<h2>Newsletter Abacus Demo AG</h2>
<p style="color:#ffffff; text-align:left">[Anreden.Anredetext] [Adressen.Anredename]<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br />
<br />
Freundliche Grüsse<br />
<br />
Abacus Demo AG</p>
</td>
</tr>
<tr>
<td align="center" id="content1" style="padding-bottom:20px; padding-left:20px; padding-right:20px; padding-top:20px">
<h3>Titel</h3>
<p style="text-align:left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</td>
</tr>
<tr>
<td align="center" id="content2" style="padding-bottom:20px; padding-left:20px; padding-right:20px; padding-top:20px">
<h3>Titel</h3>
<p style="text-align:left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</td>
</tr>
<tr>
<td align="center" id="footer" style="background-color:#282828; padding-bottom:10px; padding-top:30px">
<center>
<p style="color:#ffffff"><strong>[Adressen(Mandant).Name]</strong></p>
<p style="color:#ffffff">[Adressen(Mandant).Strasse] [Adressen(Mandant).Hausnummer]<br />
[Adressen(Mandant).Plz] [Adressen(Mandant).Ort]<br />
Schweiz</p>
<p style="color:#ffffff">T [Adressen(Mandant).Telefon 1]</p>
<p style="color:#ffffff">[Adressen(Mandant).E-Mail]<br />
[Adressen(Mandant).Website]</p>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>Regards
Christoph Abel
Abacus Research AG