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

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);  }  

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.

It seems that editor.getData() and editor.setData() can be hacked together along with a textarea element to produce a poor man's "source editor". I could see this example being dressed up with something like codemirror to produce something usable.

It's fine and dandy if the CKEditor team doesn't want this mechanism INSIDE ckeditor, but to flat out say that HTML editing is wrong, or from the dark ages, is pretty closed minded IMHO. There are much better ways to ensure quality HTML other than completely restricting the ability for end users to write it. With this approach, the CKEditor data model is still in charge of what's acceptable ultimately -- so don't expect all arbitrary markup to work.

Granted, if one chooses to go this route, prepare for the eventuality of data loss -- unless one goes to extraoridinary lengths to implement proper safety mechanisms. The important distinction here is that the user is making the decision to accept risk.

This EXAMPLE is NOT accessible. Do not use this on user-facing applications.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>CKEditor 5 Source mode demo</title>    <style>      .editor-wrapper {        position: relative;      }      .source {        display: none;      }      .ck-editor {        width: 500px !important;      }      .ck-content, .source {        position: absolute !important;        height: 500px;        width: 500px;      }    </style>  </head>  <body>    <div class="editor-wrapper">      <div id="editor">        <p>Just some text.</p>      </div>      <textarea class="source"></textarea>    </div>    <script>      // Omitted all of the CKEditor framework JS      CKEditor5.editorClassic.ClassicEditor        .create( document.querySelector( '#editor' ), config )        .then( editor => {          window.editor = editor;        });      const source = document.querySelector('.source');      const editor = document.querySelector('.ck-editor__main');      const source_toggle = document.createElement('button');      source_toggle.textContent = 'Source mode'      source_toggle.classList.add('source-toggle');      source_toggle.setAttribute('aria-pressed', 'false');      source_toggle.addEventListener('click', function() {        if (source_toggle.getAttribute('aria-pressed') === 'false') {          source_toggle.setAttribute('aria-pressed', 'true');          source.value = window.editor.getData();          editor.style.display = 'none';          source.style.display = 'block';        }        else {          source_toggle.setAttribute('aria-pressed', 'false');          window.editor.setData(source.value);          editor.style.display = 'block';          source.style.display = 'none';        }      });      const editor_toolbar = document.querySelector('.ck-toolbar');      editor_toolbar.appendChild(source_toggle);    </script>  </body></html>