Why CKEditor converts <style> tags to <span>

[MRezaKarimi]

📝 Ask a question

When I load HTML content into CKEditor, it automatically converts <style> tags to something like this:

<span data-ck-unsafe-element="style">
* { box-sizing: border-box; }
body {margin: 0;}
.
.
.
</span>

This is my configuration:

const editorConfig = {
  htmlSupport: {
    disallow: [{ name: "script" }],
    allow: [
      {
        name: /.*/,
        attributes: [
          "align",
          "valign",
          "border",
          "color",
          "bgcolor",
          "font-size",
          "font-family",
          "text-align",
          "text-decoration",
          "cellpadding",
          "cellspacing",
          "colspan",
          "rowspan",
          "width",
          "height",
          "padding",
          "margin",
          "src",
          "href",
        ],
        classes: true,
        styles: true,
      },
    ],
  },
};

I also have installed @ckeditor/ckeditor5-html-support package

---

Framework: Vue 3
@ckeditor/ckeditor5-vue: ^4.0.1
@ckeditor/vite-plugin-ckeditor5: ^0.1.1
@ckeditor/ckeditor5-html-support: 40.1.0

[Witoso]

Hi! We don't allow setting the style in the editor. Please check the #14661 for workarounds.