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 to do that.
Is there an equivalent of the Source Editing Area plugin but for CKEditor 5?
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:
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.
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).
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
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>
This has been an overly long and arduous journey. I'm sitting here trying to hack the "source editor" because the CKE team does not believe in editing raw html (but why ?)
Fortunately I stumbled onto a sneaky solution:
In my case I'm using the CKE5 online builder with a React implementation for Strapi CMS.
Key notes:
builtinPlugins make sure you have both HtmlEmbed and SourceEditingSourceEditing in your defaultToolbarNow when you want to write 100% un-modified html you can BUT you have to do it inside the following div:
<div class="raw-html-embed">
<span class="something">nested</span>
<custom>Even this tag will stay intact</custom>
</div>
Extra:
I had to hack together the SourceEditing plugin by downloading the SourceEditor source directly from the CKEditor github. I built it separately then imported it to where I was extending the CKE5 in order to add plugins / customize the toolbar.
People who come to this question how to insert html/ view source plugin in ckeditor5 please follow these steps.
Create your own Ckeditor5 build. Go to Ckeditor online builder
Select plugins and tool bar which you want
Follow all steps and download the build folder
Include in your web page like this.
src="./ckeditor5-34.1.0-to6amocvzyre/build/ckeditor.js"
Initiate Ckeditor
ClassicEditor
.create( document.querySelector( '#post-editor' ), {
licenseKey: '',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: to6amocvzyre-ms4eax6uq5yt' );
console.error( error );
} );
For more info see index.html in sample folder
