This package wraps the ckeditor5 in a webcomponent named x-ckeditor
.
$ 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
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
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import EditorManager from 'ckeditor5-webcomponent/dist/collection/editor-manager.js';
import { defineCustomElements } from 'ckeditor5-webcomponent/dist/esm/es2017/x-ckeditor.define.js';
defineCustomElements(window);
// We register the ClassicEditor under the name 'classic'
EditorManager.register('classic', ClassicEditor);
Once you did that, you can use the webcomponent with this particular editor:
index.html
<html>
<body>
<x-ckeditor editor="classic"></x-ckeditor>
</body>
</html>
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.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import CustomPlugin from 'ckeditor5-custom-package/src/customplugin';
import OtherCustomPlugin from '../relative/path/to/some/othercustomplugin';
export default class ClassicEditor extends ClassicEditorBase {}
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
EssentialsPlugin,
AutoformatPlugin,
BoldPlugin,
ItalicPlugin,
HeadingPlugin,
LinkPlugin,
ListPlugin,
ParagraphPlugin,
CustomPlugin,
OtherCustomPlugin
];
ClassicEditor.defaultConfig = {
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
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import NewClassicEditor from './my-build';
import EditorManager from 'ckeditor5-webcomponent/dist/collection/editor-manager.js';
import { defineCustomElements } from 'ckeditor5-webcomponent/dist/esm/es2017/x-ckeditor.define.js';
defineCustomElements(window);
// We register the ClassicEditor under the name 'classic'
EditorManager.register('classic', ClassicEditor);
// We register the NewClassicEditor under the name 'new-classic'
EditorManager.register('new-classic', NewClassicEditor);
And you can use it with the webcomponent:
index.html
<html>
<body>
<x-ckeditor editor="classic"></x-ckeditor>
<x-ckeditor editor="new-classic"></x-ckeditor>
</body>
</html>
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
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:
<x-ckeditor editor="classic" config="{\"language\": \"fr\"}"></x-ckeditor>
Event | Type | Description |
---|---|---|
ckeditorchange |
{detail: string} |
Fired when the CKEditor content changes, event.detail contains the new HTML string |