This plugin adds a “CKEditor” field type to Craft CMS, which provides a deeply-integrated rich text and longform content editor, powered by CKEditor 5.
Table of Contents:
Requirements
This plugin requires Craft CMS 5.9.0 or later.
Installation
You can install this plugin from Craft’s in-app 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 the sidebar.
With Composer:
Open your terminal and run the following commands:
# go to the project directory
cd /path/to/my-project
# tell Composer to load the plugin
composer require craftcms/ckeditor
# tell Craft to install the plugin
php craft plugin/install ckeditor
Configuration
Each CKEditor field allows you to choose the available toolbar buttons, as well as any custom config options and CSS styles that should be registered with the field.
Once you have selected which toolbar buttons should be available, additional settings may be applied via Config options. Options can be defined as static JSON, or a dynamically-evaluated JavaScript snippet; the latter is used as the body of an immediately-invoked function expression, and does not receive any arguments.
[!NOTE]
Available options can be found in the CKEditor's documentation. Craft will auto-complete config properties for most bundled CKEditor extensions.
Examples
Table Features
Suppose we wanted to give editors more control over the layout and appearance of in-line tables. Whenever you add the “Insert table” button to an editor, inline controls are exposed for Table Row, Table Column, and Merge. These can be supplemented with Table Properties, Table Cell Properties, and Table Caption buttons by adding them in the field’s Config options section:
{
"table": {
"contentToolbar": [
"tableRow",
"tableColumn",
"mergeTableCells",
"toggleTableCaption",
"tableProperties",
"tableCellProperties"
]
}
}
Some of these additional buttons can be customized further. For example, to modify the colors available for a cell’s background (within the “Table Cell Properties” balloon), you would provide an array compatible with the TableColorConfig schema under table.tableCellProperties.backgroundColors.
Font Colors
Multiple configuration concerns can coexist in one Config options object! You might have a table key at the top level to customize table controls (as we've done above), as well as a fontColor key that lets you control a pre-defined set of available font colors:
{
"table": { /* ... */ },
"fontColor": {
"colors": [
{
"color": "#181818",
"label": "Black"
},
{
"color": "#d64036",
"label": "Red"
},
{
"color": "#24b559",
"label": "Green"
},
{
"color": "#4fa0b0",
"label": "Blue"
}
]
}
}
External Links
You no longer have to use the link configuration concern to allow authors to choose whether links should open in new tabs. The manual decorator that added this option can now be made available simply by checking a relevant checkbox under “Advanced Link Fields”.
[!TIP]
An automatic version of this feature is available natively, via the link.addTargetToExternalLinks option.
Registering Custom Styles
CKEditor’s Styles plugin makes it easy to apply custom styles to your content via CSS classes.
You can define custom styles using the style config option:
return {
style: {
definitions: [
{
name: 'Tip',
element: 'p',
classes: ['note']
},
{
name: 'Warning',
element: 'p',
classes: ['note', 'note--warning']
},
]
}
}
You can then register custom CSS styles that should be applied within the editor when those styles are selected:
.ck.ck-content p.note {
border-left: 4px solid #4a7cf6;
padding-left: 1rem;
color: #4a7cf6;
}
.ck.ck-content p.note--warning {
border-left-color: #e5422b;
color: #e5422b;
}
HTML Purifier Configs
CKEditor fields pass input through HTML Purifier to avoid saving malicious code to the database. This helps prevent XSS attacks and other vulnerabilities.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
