CKEditor 5 - How to insert some HTML (aka. where's the source mode)?

Question

I want to be able to switch from WYSIWYG to plain HTML to e.g. insert IFrame with a Youtube video. So far with the standard CKEditor 5 builds there is no documentation on how t

Answer 1

Your question touches two complicated topics:

• Whether source mode makes any sense in general.
• Whether it is possible to allow inputting (and editing) any HTML to CKEditor 5.

They've been already discussed in the "View Source" mode and "How to preserve markup and not have it removed" tickets on CKEditor 5's GitHub, but I'll try to quickly explain them here.

Does the source mode make sense?

Not really. It makes some sense for a small group of people who know HTML and who can reliably edit it manually, but then why using a rich-text editor at all?

You can say though, that it's not a problem? Only power users will edit HTML. The rest will use the WYSIWYG mode. But here another set of problems appear. You just inserted arbitrary HTML into the editor and now other users try to edit it in the WYSIWYG mode. But since this is an HTML which the editor doesn't understand (because there are no features which handle it) there's a huge chance that it's going to be destroyed with time. That those blobs of HTML will be split, bolded, wrapped, incorrectly copied and pasted, etc. You can say that the source mode proves to be useful once again because due to lack of a proper UI to edit that blob you'll need to manually fix it. But wait – wasn't all this mess why people hate rich-text editors?

Let's look at this through an analogy. A rich-text editor is just an interface to edit some data (in HTML format in this case). Similarly, a CMS is an interface to edit a database. So do you give a direct access to your database to normnal users? Do you add products to your database manually via mysqladamin? I don't think so. It's neither convenient nor safe nor understandable for normal users.

So don't try to edit HTML manually. If your CMS misses a feature, you just add a feature. Do the same with rich-text editors. And don't blame them for ruining your hand-crafted HTML if you haven't teached them what this HTML means and how to treat it.

I really encourage you to read "View Source" mode because we've touched there many interesting topics (e.g. what a structured content is).

Is it possible to input any HTML to CKEditor 5?

No. I'll quote myself here:

CKEditor 5 implements a custom data model. In order to load data to this model you need to have view -> model converters for each piece of the content that you want your editor to support. Then, you need model -> view converters in order to make this content editable (it needs to be rendered in the editor for editing). Finally, you need to configure the schema and sometimes customize certain features like Enter so they know the meaning of this content that you loaded into the editor and how to modify it.

In other words, because of the data model a feature needs to implement the full life-cycle of a specific piece of content (tag, attribute, etc.) which it handles – from data loading, through rendering for editing, editing itself and data retrieval.

Source: https://github.com/ckeditor/ckeditor5/issues/705

New era

The times have changed. For years we tried to educate developers how rich-text editors should be used but the dark age of WYSIWYGs being used to edit entire websites stayed strong among in people minds.

With CKEditor 5 there's no more an option to edit arbitrary HTML due to the data model and the overal architecture which forces developers to rethink their integrations. At the same time, the existence of the data model and a completely new architecture make it so much easier to implement editing features that this job will finally be really approachable. It won't come free, for sure, but the final effect will be much better too.

Answer 2

Yes, it's possible to insert html into CKEditor5:

  insertHTML(html:string) {

    // See: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content
    const viewFragment = this.editor.data.processor.toView( html );
    const modelFragment = this.editor.data.toModel( viewFragment );
    this.editor.model.insertContent(modelFragment);
  }