ckeditor5-webcomponent
This package wraps the ckeditor5 in a webcomponent named x-ckeditor
.
Install
$ npm install --save ckeditor5-webcomponent
In order to be able to use this component you will have to install polyfills for webcomponents (v1 spec), and ckeditor
Usage
Because CKEditor 5 is very modular it was hard to design a webcomponent that was able to be that modular, allowing anyone to create and add new plugins to their editor without having to create new webcomponents.
That's why I decided to add another layer to this webcomponent: an Editor Manager.
The goal of this editor manager is to register ckeditor builds you want to use in your application. This way, when you use the x-ckeditor
you only need to specify which ckeditor build you want to use.
Here is an example:
Let's say you want to use the ClassicEditor
build. All you need is to install it and register it to the Editor Manager:
npm install --save @ckeditor/ckeditor5-build-classic
index.js
;;; ; // We register the ClassicEditor under the name 'classic'EditorManager;
Once you did that, you can use the webcomponent with this particular editor:
index.html
Using 2 or more ckeditor builds
Following the previous example, you can register more ckeditor builds.
Let's say you just followed the custom build tutorial and created a new build:
my-build.js
'use strict'; // The editor creator to use.; ;;;;;;;; ;; {} // Plugins to include in the build.ClassicEditorbuiltinPlugins = EssentialsPlugin AutoformatPlugin BoldPlugin ItalicPlugin HeadingPlugin LinkPlugin ListPlugin ParagraphPlugin CustomPlugin OtherCustomPlugin; ClassicEditordefaultConfig = toolbar: 'heading' '|' 'bold' 'italic' 'custombutton' // This value must be kept in sync with the language defined in webpack.config.js. language: 'en';
If you follow this example you will have to install all dependencies for all plugins used
Now you can register your new build:
index.js
;;;; ; // We register the ClassicEditor under the name 'classic'EditorManager;// We register the NewClassicEditor under the name 'new-classic'EditorManager;
And you can use it with the webcomponent:
index.html
Options
Property | Type | Description |
---|---|---|
config |
string |
(optional) CKEditor config |
content |
string |
(optional) HTML string of the editor content |
editor |
string |
The name of the registered build |
target-id |
string |
(optional) The id of the element to bind to. If left empty the editor will render for this webcomponent |
config
config
must be a stringified json object.
For instance, if you want to support more languages you could follow this tutorial and then set the configuration to:
Events
Event | Type | Description |
---|---|---|
ckeditorchange |
{detail: string} |
Fired when the CKEditor content changes, event.detail contains the new HTML string |