Plugin configuration
# Configuration convention
As we learned at the beginning of this tutorial, the editor accepts a configuration object that allows you to change its default behavior and appearance. The convention used in CKEditor 5 is to have a unique object key for each plugin to avoid conflicts and to make it obvious what each part of the configuration does.
In this tutorial, we will add a single option to the highlight
plugin to configure its keyboard shortcut. This configuration will be included in an optional highlight
key:
const editor = await ClassicEditor.create( element, {
licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
// Other options are omitted for readability - do not remove them.
highlight: {
}
} );
# Adding a new configuration key
Once we know the shape of the configuration object that the plugin will accept, let’s define a new configuration key and default values. These values will be used if the configuration is not provided in the editor configuration.
To do this, add the following code at the top of the Highlight
function:
editor.config.define( 'highlight', {
keystroke: 'Ctrl+Alt+H'
} );
The first parameter passed to the method is the name of the configuration object key, and the second is the default values.
# Loading configuration option
We have defined the default value for the keystroke
key as 'Ctrl+Alt+H'
, which is the value we currently have hardcoded into our plugin. Let’s update our plugin to read this value from the configuration instead.
After the configuration we defined above, add the following line to read the keystroke
configuration:
const keystroke = editor.config.get( 'highlight.keystroke' );
Then, replace both occurrences of the 'Ctrl+Alt+H'
string in our plugin:
button.set( {
label: t( 'Highlight' ),
withText: true,
tooltip: true,
isToggleable: true,
keystroke // Update this line.
} );
editor.keystrokes.set( keystroke, 'highlight' ); // Update this line.
# Testing changes
Let’s test our changes. In the browser, select some of the text in the editor and press the Ctrl + Alt + H to see if the default configuration works as it did before.
Then, open the src/main.js
file and update the editor’s configuration to change the highlight keyboard shortcut to Ctrl + Alt + 9:
const editor = await ClassicEditor.create( element, {
licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
// Other options are omitted for readability - do not remove them.
highlight: {
keystroke: 'Ctrl+Alt+9'
}
} );
Finally, in the browser, select some of the text in the editor and press the Ctrl + Alt + 9 keys to confirm that the new shortcut works.
# The end?
Congratulations, you have just finished this tutorial!
This is not the end, though. If you want to continue learning, go to the Framework section of our documentation.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.