Using CKEditor 5 with Svelte and npm

Svelte is a modern JavaScript compiler that builds highly optimized, reactive web applications. Unlike traditional frameworks, Svelte shifts most of the work from runtime to build time, resulting in highly efficient applications. CKEditor 5 can be easily integrated with Svelte applications, providing powerful rich text editing capabilities to your projects.

# Quick start

This guide will show you how to integrate CKEditor 5 into a Svelte application using the npm distribution. If you are new to Svelte, check out their official tutorial.

# Setting up a Svelte project

First, create a new Svelte project using Vite:

npm create vite@latest ckeditor-svelte -- --template svelte
cd ckeditor-svelte
npm install

# Installing CKEditor 5

Next, install the ckeditor5 and the ckeditor5-premium-features packages:

npm install ckeditor5 ckeditor5-premium-features

# Project structure

When completed, the folder structure of your project should resemble this one:

├── node_modules/
├── public/
├── src/
│   ├── lib/
│   │   └── Editor.svelte
│   ├── App.svelte
│   ├── main.js
│   └── ...
├── index.html
├── package.json
├── vite.config.js
├── svelte.config.js
└── ...

The integration requires two key Svelte components:

• src/lib/Editor.svelte - the component that wraps CKEditor functionality
• src/App.svelte - the main application component that uses the Editor component

Let’s implement these components next.

# Implementing the Editor component

Create a new file src/lib/Editor.svelte with the following content:

<script>
    import { onMount, onDestroy } from 'svelte';
    
    import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5';
    import { FormatPainter } from 'ckeditor5-premium-features';
    
    import 'ckeditor5/ckeditor5.css';
    import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

    let editorContainer;
    let editorInstance = null;

    onMount( () => {
        ClassicEditor
            .create( editorContainer, {
                licenseKey: '<YOUR_LICENSE_KEY>', // Replace with your license key or 'GPL'
                plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
                toolbar: [
                    'undo', 'redo', '|', 'bold', 'italic', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                    'formatPainter'
                ]
            } )
            .then( editor => {
                editorInstance = editor;
            } )
            .catch( error => {
                console.error( 'Error initializing CKEditor:', error );
            } );
    } );

    onDestroy( () => {
        if ( editorInstance ) {
            editorInstance.destroy().catch( err => console.error( err ) );
        }
    } );
</script>

<div bind:this={editorContainer}>
    <p>Hello from CKEditor 5!</p>
</div>

# Using the Editor component

Now, modify the main App.svelte file to use our editor component:

<script>
    import Editor from './lib/Editor.svelte'
</script>

<main>
    <h1>CKEditor 5 + Svelte</h1>

    <div class="editor-wrapper">
        <Editor />
    </div>
</main>

<style>
    .editor-wrapper {
        width: 800px;
    }

    :global(.ck.ck-editor__editable) {
        height: 200px;
        background-color: white;
        color: #333;
    }
</style>

You can now run the dev server to see the editor in action:

npm run dev

# Component structure

The Svelte integration follows these key steps:

1. Import dependencies: The required CKEditor 5 modules and styles are imported
2. Editor initialization: The editor is created with the specified configuration when the component mounts
3. Cleanup: Resources are properly released when the component is destroyed

# Styling

Basic styling is provided in the App.svelte component to ensure proper display in various environments, especially when using dark themes:

.editor-wrapper {
    width: 800px;
}

:global(.ck.ck-editor__editable) {
    height: 200px;
    background-color: white;
    color: #333;
}

# Next steps

• Explore the Getting and setting data guide to learn how to handle content.
• Learn more about configuration options to customize your editor.
• Check the features documentation to add more functionality to your editor.