# Integrating CKEditor 5 with jQuery using npm

You can use the CKEditor 5 rich-text editor in a [jQuery](https://jquery.com/) project by installing the CKEditor 5 npm packages and initializing the editor on a DOM element selected with jQuery.

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="installing-ckeditor-5-using-npm">

## Installing CKEditor 5 using npm

> **Note**
>
> To set up the editor from npm, you need a bundler to build the JavaScript files correctly. CKEditor 5 is compatible with all modern JavaScript bundlers. For a quick project setup, we recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).

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:

```bash
npm install ckeditor5
```

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

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

> **Note**
>
> Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from npm:
>
> * You must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

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

```javascript
import $ from 'jquery';

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

import 'ckeditor5/ckeditor5.css';

$( document ).ready( () => {
	ClassicEditor
		.create( {
			attachTo: $( '#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 5 initialized with jQuery!' );
		} )
		.catch( error => {
			console.error( 'Error initializing CKEditor 5:', error );
		} );
} );
```

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

The `create()` configuration uses the `attachTo` property to accept a DOM element, so you must ensure this element is added to your HTML page.

```html
<div id="editor">
	<p>Hello from CKEditor 5 with jQuery!</p>
</div>
```

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

<a id="installing-ckeditor-5-premium-features-using-npm">

## Installing CKEditor 5 Premium Features using npm

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:

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

```javascript
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( {
			attachTo: $( '#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 5 with premium features initialized using jQuery!' );
		} )
		.catch( error => {
			console.error( 'Error initializing CKEditor 5 with premium features:', error );
		} );
} );
```

<a id="obtaining-a-premium-features-license-key">

### Obtaining a premium features license key

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](https://portal.ckeditor.com/checkout?plan=free).

You can also [contact us](https://ckeditor.com/contact/?sales=true#contact-form) to receive an offer tailored to your needs. To obtain an activation key, please follow the [License key and activation](../../licensing/license-key-and-activation.md) guide.

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../features/index.md) to learn more about individual features.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)