Integrating CKEditor 5 with jQuery using npm

This guide will walk you through the process of integrating CKEditor 5 with jQuery using npm packages. jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, and animation. By combining it with CKEditor 5 using npm packages, you can leverage jQuery’s powerful DOM manipulation capabilities while enjoying the rich editing experience that CKEditor 5 provides.

To begin integrating CKEditor 5 with jQuery, you first need to install the required packages using npm. This approach provides access to all the necessary files including the editor engine, plugins, and style sheets that you can import directly into your application.

Install CKEditor 5 using npm by running the following command in your project directory:

npm install ckeditor5

You also need to install jQuery if you have not done so already:

npm install jquery

Once the packages are installed, you can import the necessary modules and style sheets directly into your JavaScript code. Create a JavaScript file for your application logic, then import CKEditor 5 and jQuery.

Here is the complete integration code combining jQuery and CKEditor 5:

import $ from 'jquery';

import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

$( document ).ready( () => {
    ClassicEditor
        .create( $( '#editor' )[ 0 ], {
            licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
            plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
            ]
        } )
        .then( editor => {
            // Editor initialized successfully.
            console.log( 'CKEditor&nbsp;5 initialized with jQuery!' );
        } )
        .catch( error => {
            console.error( 'Error initializing CKEditor&nbsp;5:', error );
        } );
} );

Pass the imported plugins inside the configuration to the create() method and add toolbar items where applicable.

The first argument in the create() function is a DOM element for the editor placement, so you need to add it to your HTML page.

<div id="editor">
    <p>Hello from CKEditor&nbsp;5 with jQuery!</p>
</div>

That is all the code you need to see a bare-bone editor running in your web browser.

To extend your CKEditor 5 and jQuery integration with premium features, you need to install the premium features package separately.

Install the CKEditor 5 Premium Features package using npm by running the following command in your project directory:

npm install ckeditor5-premium-features

Now, you can import all the modules from both the ckeditor5 and ckeditor5-premium-features packages. Additionally, you have to import CSS styles separately.

import $ from 'jquery';

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';

$( document ).ready( () => {
    ClassicEditor
        .create( $( '#editor' )[ 0 ], {
            licenseKey: '<YOUR_LICENSE_KEY>',
            plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                'formatPainter'
            ]
        } )
        .then( editor => {
            // Editor initialized successfully with premium features.
            console.log( 'CKEditor&nbsp;5 with premium features initialized using jQuery!' );
        } )
        .catch( error => {
            console.error( 'Error initializing CKEditor&nbsp;5 with premium features:', error );
        } );
} );

To activate CKEditor 5 premium features, you will need a commercial license. The easiest way to get one is to sign up for the CKEditor Premium Features 14-day free trial.

You can also contact us to receive an offer tailored to your needs. To obtain an activation key, please follow the License key and activation guide.

• See how to manipulate the editor’s data in the Getting and setting data guide.
• Refer to further guides in the setup section to see how to customize your editor further.
• Check the features category to learn more about individual features.