Integrating CKEditor 5 with Svelte from CDN

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 rich-text editor can be easily integrated with Svelte applications, providing powerful rich text editing capabilities to your projects.

Quick start

Note

To use our Cloud CDN services, create a free account. Learn more about license key activation.

This guide will show you how to integrate CKEditor 5 into a Svelte application using the CDN 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

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:

Modifying index.html to include CKEditor 5 scripts and style sheets
Creating the src/lib/Editor.svelte component
Updating the src/App.svelte main application component

Let’s implement these changes next.

Adding CKEditor 5 scripts and styles

To load CKEditor 5 from CDN, modify the main HTML file of your project (index.html) to include the necessary scripts and style sheets:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 + Svelte</title>
        <!-- CKEditor 5 CSS -->
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/46.1.0/ckeditor5.css" />
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/46.1.0/ckeditor5-premium-features.css" />
        <!-- CKEditor 5 Scripts -->
        <script src="https://cdn.ckeditor.com/ckeditor5/46.1.0/ckeditor5.umd.js"></script>
        <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/46.1.0/ckeditor5-premium-features.umd.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>

Note

The premium features scripts and style sheets are optional and used in this guide to demonstrate a complete integration. You can use just the open-source features if you prefer.

Implementing the Editor component

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

<script>
    import { onMount, onDestroy } from 'svelte';

    let editorContainer;
    let editorInstance = null;
    
    onMount( () => {
        const { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } = CKEDITOR;
        const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;
        
        ClassicEditor
            .create( editorContainer, {
                licenseKey: '<YOUR_LICENSE_KEY>', // Replace with your license key
                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 HTML editor integration follows these key steps:

Static loading: CKEditor 5 scripts and styles are loaded from CDN in the HTML file
Editor initialization: The editor is created with the specified configuration when the component mounts
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.