❤
npm
Sign UpSign In

ckeditor5-webcomponent
TypeScript icon, indicating that this package has built-in type declarations

2.0.5 • Public • Published

Built With Stencil

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

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>

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.
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>

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:

<x-ckeditor editor="classic" config="{\"language\": \"fr\"}"></x-ckeditor>

Events

Event Type Description
ckeditorchange {detail: string} Fired when the CKEditor content changes, event.detail contains the new HTML string

Readme

Keywords

Package Sidebar

Install

npm i ckeditor5-webcomponent

Repository

github.com/FabienHenon/ckeditor5-webcomponent

Homepage

github.com/FabienHenon/ckeditor5-webcomponent#readme

Weekly Downloads

10

Version

2.0.5

License

MIT

Unpacked Size

262 kB

Total Files

46

Last publish

Collaborators

  • fabienhenon
Try on RunKit
Report malware