WebComponent for CKEditor 5
Let's ship every build as a web component
Shadow DOM support
Ability to close the editor in a shadow DOM would greatly improve its integrity by scoping its styles. However, this requires some changes:
- In the engine: https://github.com/ckeditor/ckeditor5-engine/issues/692
- In all other places where we create element/nodes?
The body UI collection (https://github.com/ckeditor/ckeditor5/issues/1478)
The so-called "body collection" is where we keep floating panels (so they are not trimmed by overflowed parents and are easier to position). It's automatically created in the
<body>element. If we'd enclose CKEditor in a<ck-editor>, we should not leak from this element, hence we need to give the developer some control over where this collection is rendered.Naming (
<ck-editor>or<ckeditor-classic>or ?)The name must contain the
-character Also, there may be multiple editor types on one page, so<ckeditor-*>seems natural. Or not?Should every editor build expose a web component by default?
For once, it would be cool that you can use
ClassicEditor.create()or<ckeditor-classic>after importing@ckeditor/ckeditor5-build-classicinto your page.However, I'm not sure how much additional code will the componentization of CKEditor require. I hope it won't increase the final size that much because we'd have to consider having two files in each build (
ckeditor.jsand e.g.ckeditor.webcomponent.js).How to componentize specific types of editors. It's fairly easy with the classic editor, but gets more tricky with the inline/balloon editors and super tricky with the decoupled editor. Most likely, we should keep it as consistent with the React/Angular/Vue components as possible.
How to make the editor configurable (pass the config object).
How to build CSS for web components. This may be a blocker for having one build for normal and component use.
If you'd like to see the support for web components, please react with ❤️ .
Source: ckeditor/ckeditor5