Rendering HTML page in CKEditor 5

Question

Problem statement: I recently updated from CKEditor 4 to CKEditor 5 and facing an issue with rendering Html page. I found that when I provide HTML content to CKEditor 5, it removes all the styling and render as plain HTML.

I went through some different issue and question, I found that CKEditor 5 implements a custom data model. This means that every piece of content that is loaded into the editor needs to be converted to that model and then rendered back to the view.

*Below are preview links to reproduce the issue in ckeditor5: *

CKEditor 4: https://codepen.io/bhuvavaibhav2rs/pen/rNBxbwG

CKEditor 5: https://codepen.io/bhuvavaibhav2rs/pen/yLBerKb

In CKEditor 4, It's working as expected after giving the configuration below:

CKEDITOR.replace('editor1', {
        fullPage: true,
        allowedContent: true
      });

In CKEditor 5, We are not able to find the same above configuration.

Eisegesis

Thanks, @Peter for your answer. Could you please point me to any plugins which are developed to support my use-case. – Eisegesis

Updated answer. Unfortunately, if you want the HTML editing you described with v4, you must stay on v4. do you need any more help with this question? Please let me know or mark my answer as accepted. Thank you. – Milanmilanese

Answer 1

Due to architectural changes in v5, you cannot edit HTML in the same way as you did in v4 with CKEditor 5. Please read on to understand why.

After some experimentation with no success, I dug into the source repository and came accross this issue comment from a contributor to the project:

Hi, inserting arbitrary HTML is not possible in CKE5. This is for a few reasons.

Furthermore, a linked issue explains the reasoning behind the v5 API changes:

So far I've been talking about CKEditor 4. How's CKEditor 5 different?

CKEditor 4 uses the DOM as a model. When loading data, the HTML is processed (read – filtered, normalized and escaped) but it ends up in the DOM anyway.

CKEditor 5 has a custom data model. When you load HTML into the editor, it's parsed and then features (initialized previously in the editor) try to pick up from this HTML the pieces they understand. This is called "conversion". As a result of a conversion, the content is being loaded into the custom data structure. The reverse process is executed when content needs to be rendered back to the DOM (either for editing or for data retrieval).

This means that if you don't have a feature which handles a certain HTML tag/attribute/style/whatever then the editor will automatically drop it.

Is there a CKEditor 5 plugin to support HTML editing?

No, the community recommendation is to use CKEditor 4.

References:

• issue #664 explaining in-depth architectural changes in v5
• comment on issue #592

Milanmilanese