CODEWITHSUNDEEP
javascriptckeditor5
MattOpen
MattOpen

Reputation: 824

Why does the CKEditor5 filter out my content (styles, classes, elements)?

I am using CKEditor5 as editor on my website. When I switch the "source button" and paste my html code, then toggle back the source button - my html code has changed and I am missing some class and html tags. As example, paste this

<div class="myclass">some content</div>

it has been changed to...

<p>some content</p>

This question was asked 9 years ago and was related to Version 4. CKEditor automatically strips classes from div Solution was an additional parameter

config.allowedContent = true;

but looks to me, it is not working any longer. The CKEditor5 FAQ says, I have to write a plugin. https://ckeditor.com/docs/ckeditor5/latest/support/faq.html#why-does-the-editor-filter-out-my-content-styles-classes-elements-where-is-configallowedcontent-true

Does anyone has done this? Or is there an easier solution?

Upvotes: 3

Views: 2095

Answers (2)

crucifery
crucifery

Reputation: 458

CKEditor 5 filters out everything that its included features do not support. In other words, CKE5 supports only those that you added as plugins.

If none of features work with <div>, it will be removed during conversion to internal modal. See upcast/downcast convertors and dataSchema.

To start working with div, you either

  1. have to add any feature (aka plugin) that works with it and registers required explicit up/down conversions via a model.
  2. OR add raw HTML support via GeneralHTMLSupport plugin.
const htmlSupport = {
    allow: [
        {
            name: 'div',
            classes: ['myclass'],
        },
    ],
};

The key to undertand about internals is that all incoming data goes through conversions, hence, if something is not supported by convertors, it will be stripped out.

Upvotes: 1

William S. Takayama
William S. Takayama

Reputation: 140

check these documents:

migration-guide and general-html-support

Basically, their FAQ is not really straightforward answering about filtering out those elements and should link these pages above that I sent you, as CKEditor 5 works completely different from CKEditor 4.

But you could achieve that by installing GeneralHtmlSupport from @ckeditor/ckeditor5-html-support

Hope it helps :)

Upvotes: 0

Related Questions