CKEditor removes internal CSS #14661

anchal04 · 2023-07-26T05:37:40Z

Hi,

I am upgrading CKEditor from version 4 to 5.
When I paste any HTML and click on source button It ignores the internal style applied and render only plain html.

<style>
    .some-class {
      ...
     }
  </style>
  <div class = "some-class">
    ...
  </div>

Here, class style is ignored and div is rendered without style

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

The text was updated successfully, but these errors were encountered:

Witoso · 2023-07-31T09:29:01Z

The editor will not preserve the style, and will mark it as unsafe. We would recommend adding the styles to the page's head or CSS file.

There's a workaround (using FullPage plugin), that was proposed in one comment as a custom plugin.

anchal04 · 2023-08-03T09:40:20Z

@Witoso Thanks for replying. I have checked this plugin FullPage but its not supporting internal CSS.
Example

<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

When I click on source, editor ignores style and render whatever is inside body.

Expected

Actual

corey-Robinson1337 · 2023-08-03T12:08:25Z

The editor will not preserve the style, and will mark it as unsafe. We would recommend adding the styles to the page's head or CSS file.

There's a workaround (using FullPage plugin), that was proposed in one comment as a custom plugin.

I used this workaround and it causes styles to "bleed" outside the editor. To me that solution isn't good enough to be promoting to solve the desired use.

Witoso · 2023-08-03T13:34:08Z

Sorry for not making it more explicit. The proper way is to use CSS to style the content if that's your use case. CKE5 will not accept the style tag, and we would rather not promote rendering <style> elements. I found a workaround that will work without the FullPage. @anchal04 feel free to check it as well.

anchal04 · 2023-08-09T05:17:04Z

@Witoso I have tried this workaround for the above html code
Inside editor.editing.view.domConverter.unsafeElements only script is present

Witoso · 2023-08-14T08:00:15Z

It has to be combined with GHS (as in the linked example) or a custom converter for <style> elements (but I recommend using GHS in this case as it's the simplest).

Do you have GHS enabled?

anchal04 · 2023-08-17T07:19:23Z

@Witoso yes it is enabled

Witoso · 2023-08-21T12:06:06Z

But does the config allows it? In the full configuration:

  allow: [
    {
      name: /.*/,
      attributes: true,
      classes: true,
      styles: true,
    },
  ],

style is under the editor.editing.view.domConverter.unsafeElements.

Sherry-Lee · 2023-09-12T08:18:35Z

Hi @Witoso,
I have tried the GeneralHtmlSupport as you provided above with the workaround, but the style tag is still converted to the span with the attribute 'data-ck-unsafe-element' on the regular mode.
Are there any updates on this issue?

Witoso · 2023-09-14T10:51:47Z

Did you add this function to plugins list of the editor?

srav09 · 2023-10-11T20:42:29Z

Hi @Witoso,
I have added "RenderStyleElements" method to CKeditor config file.

`
/**
*
*
*/
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js';
import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting.js';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency.js';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials.js';
import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/specialcharacterslatin.js';
import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical.js';
import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/specialcharacterstext.js';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js';
import InsertDropDown from '../src/ckeditor5-insertdropdown/src/insertdropdown.js';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import { ImageUpload, ImageUploadUI, ImageResize } from '@ckeditor/ckeditor5-image';
import FullPage from '@ckeditor/ckeditor5-html-support/src/fullpage.js';
import HtmlComment from '@ckeditor/ckeditor5-html-support/src/htmlcomment.js';

class Editor extends ClassicEditor {}

function RenderStyleElements( editor ) {
// Remove the 'style' name from the list of unsafe elements.
const unsafeElements = editor.editing.view.domConverter.unsafeElements;
const indexOfStyle = unsafeElements.indexOf( 'style' );
if ( indexOfStyle > -1 ) {
unsafeElements.splice( indexOfStyle, 1 );
}
}

// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
Bold,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
GeneralHtmlSupport,
RenderStyleElements,
Heading,
HorizontalLine,
HtmlEmbed,
Image,
Indent,
Italic,
Link,
List,
Paragraph,
PasteFromOffice,
RemoveFormat,
SourceEditing,
SpecialCharacters,
SpecialCharactersArrows,
SpecialCharactersCurrency,
SpecialCharactersEssentials,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
Strikethrough,
Subscript,
Superscript,
Table,
TableToolbar,
TextTransformation,
Underline,
InsertDropDown,
SimpleUploadAdapter,
ImageUpload,
ImageUploadUI,
ImageResize,
FullPage,
HtmlComment
];

// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'undo',
'redo',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'subscript',
'superscript',
'removeFormat',
'|',
'sourceEditing',
'|',
'bulletedList',
'numberedList',
'outdent',
'indent',
'alignment',
'|',
'link',
'|',
'insertTable',
'specialCharacters',
'|',
'heading',
'fontFamily',
'|',
'fontColor',
'fontBackgroundColor',
'|',
'insertDropDown',
'imageUpload'
]
},
language: 'en',
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
dropdownlist: [],
htmlEmbed: {
showPreviews: [ true ]
},
htmlSupport: {
allow: [
{
name: /^(a|abbr|address|area|article|aside|audio|b|bdi|bdo|blockquote|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|fieldset|figcaption|figure|footer|form|h[1-6]|header|hr|i|img|input|ins|kbd|label|legend|li|link|main|map|mark|meter|nav|ol|optgroup|option|output|p|param|picture|pre|progress|q|rb|rp|rt|rtc|ruby|s|samp|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|tr|track|u|ul|var|video|wbr|head|html|center|body)$/,
attributes: true,
classes: true,
styles: true
}
]
}
};

export default { Editor, EditorWatchdog };
`

But, it still removes internal css, any suggestions if anything is wrong here?

srav09 · 2023-10-20T19:51:06Z

Hi @anchal04, did you find any solution for this? I have tried above but it didn't work.

anchal04 · 2023-12-13T09:43:34Z

yes, Above workarounds(#13482 (comment) & #12838 (comment)) solves the issue. Thanks @Witoso

@srav09 If you are using ckeditor custom build editor then try these steps:

Add above custom plugins
Inside ckeditor folder, remove node_modules and build folders
Inside ckeditor folder, install packages with npm i
Rebuild the editor by executing npm run build
Then, to make the new build available in the app, execute npm i ./ckeditor in the root folder.

anchal04 added the type:bug This issue reports a buggy (incorrect) behavior. label Jul 26, 2023

Witoso added pending:feedback This issue is blocked by necessary feedback. domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. package:html-support squad:core Issue to be handled by the Core team. labels Jul 31, 2023

FilipTokarski added the support:2 An issue reported by a commercially licensed client. label Dec 12, 2023

anchal04 closed this as completed Dec 13, 2023

Witoso added resolution:resolved This issue was already resolved (e.g. by another ticket). and removed pending:feedback This issue is blocked by necessary feedback. labels Dec 15, 2023

Witoso mentioned this issue Dec 18, 2023

Why CKEditor converts <style> tags to <span> #15513

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CKEditor removes internal CSS #14661

CKEditor removes internal CSS #14661

anchal04 commented Jul 26, 2023 •

edited

Loading

Witoso commented Jul 31, 2023

anchal04 commented Aug 3, 2023

corey-Robinson1337 commented Aug 3, 2023

Witoso commented Aug 3, 2023

anchal04 commented Aug 9, 2023 •

edited

Loading

Witoso commented Aug 14, 2023

anchal04 commented Aug 17, 2023

Witoso commented Aug 21, 2023

Sherry-Lee commented Sep 12, 2023 •

edited

Loading

Witoso commented Sep 14, 2023

srav09 commented Oct 11, 2023

srav09 commented Oct 20, 2023

anchal04 commented Dec 13, 2023 •

edited

Loading

CKEditor removes internal CSS #14661

CKEditor removes internal CSS #14661

Comments

anchal04 commented Jul 26, 2023 • edited Loading

Witoso commented Jul 31, 2023

anchal04 commented Aug 3, 2023

corey-Robinson1337 commented Aug 3, 2023

Witoso commented Aug 3, 2023

anchal04 commented Aug 9, 2023 • edited Loading

Witoso commented Aug 14, 2023

anchal04 commented Aug 17, 2023

Witoso commented Aug 21, 2023

Sherry-Lee commented Sep 12, 2023 • edited Loading

Witoso commented Sep 14, 2023

srav09 commented Oct 11, 2023

srav09 commented Oct 20, 2023

anchal04 commented Dec 13, 2023 • edited Loading

anchal04 commented Jul 26, 2023 •

edited

Loading

anchal04 commented Aug 9, 2023 •

edited

Loading

Sherry-Lee commented Sep 12, 2023 •

edited

Loading

anchal04 commented Dec 13, 2023 •

edited

Loading