CKEditor for Craft CMS

This plugin adds a “CKEditor” field type to Craft CMS, which provides a wrapper for CKEditor.

Requirements

This plugin requires Craft CMS 4.3.6 or later.

Installation

You can install this plugin from the Plugin Store or with Composer.

From the Plugin Store

Go to the Plugin Store in your project’s Control Panel and search for “CKEditor”. Then click on the “Install” button in its modal window.

With Composer

Open your terminal and run the following commands:

# go to the project directory
cd /path/to/my-project.test

# tell Composer to load the plugin
composer require craftcms/ckeditor

# tell Craft to install the plugin
./craft plugin/install ckeditor

Providing a CKEditor Build

CKEditor 5 (27.0.0, “classic” build) is used by default. To customize the CKEditor build, go to Settings → CKEditor, and edit the CKEditor Build URL setting.

You can set this to a build provided by the CKEditor CDN, or you can supply your own customized CKEditor build, published somewhere within your web root.

• CKEditor 4 builder
• CKEditor 5 builder

Configuration

Editor Configuration

If you want to customize a field’s configuration options, you can do that by providing custom initialization code for the field, from its Initialization Code setting.

Reference the source <textarea> element’s ID using “__EDITOR__”, and be sure that the code returns the editor instance.

// CKEditor 4
return CKEDITOR.replace('__EDITOR__', {
    language,
    filebrowserBrowseUrl, // CKE4 only
    filebrowserImageBrowseUrl, // CKE4 only
    // ...
});

// CKEditor 5
return await ClassicEditor
    .create(document.querySelector('#__EDITOR__'), {
        language,
        // ...
    });

• CKEditor 4 config options
• CKEditor 5 config options

HTML Purifier Configs

CKEditor fields use HTML Purifier to ensure that no malicious code makes it into its field values, to prevent XSS attacks and other vulnerabilities.

You can create custom HTML Purifier configs that will be available to your CKEditor fields. They should be created as JSON files in your config/htmlpurifier/ folder.

Use this as a starting point, which is the default config that CKEditor fields use if no custom HTML Purifier config is selected:

{
  "Attr.AllowedFrameTargets": [
    "_blank"
  ],
  "Attr.EnableID": true
}

See the HTML Purifier documentation for a list of available config options.