Plugins

In the previous chapter of this tutorial, we learned that the editor is just an empty shell, and what gives the editor almost all of its functionality are the plugins. We also installed two plugins to be able to type in the editor.

import { Essentials, Paragraph } from 'ckeditor5';

const editor = await ClassicEditor.create( element, {
    licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
    plugins: [
        Essentials,
        Paragraph
    ]
} );

However, we have actually installed more plugins - how so?

The Essentials plugin is a wrapper for other plugins, each providing the basic functionality you would expect from a text editor:

• Clipboard,
• Enter,
• SelectAll,
• ShiftEnter,
• Typing,
• Undo.

Another common pattern is that plugins depend on other plugins and need them to work properly. This is usually noted in the documentation of a given plugin, and the error messages thrown by the editor will include an explanation of what’s missing.

Since the Essentials plugin does not define block-level containers, we also installed the Paragraph plugin to add support for the <p> HTML tag.

The editor we created so far still lacks many features, such as support for headings, tables, block quotes, and much more. You can add them using plugins, of course.

For a list of plugins, usage examples, installation, and configuration options, see the Plugins and HTML output guide.

If the editor and any of its plugins do not provide the functionality you need, you may want to create a custom plugin. This requires knowledge of the editor’s internals, which we will discover in the next chapters of the tutorial.

We will create a simplified version of the existing highlight plugin. We want to be able to highlight certain parts of the text to make them stand out from the rest.

If you ever get stuck, want to see an example of writing a TypeScript plugin, or just want to see our APIs in action, check out the Highlight plugin source code.

In the project, we created in the previous chapter, open the src/plugin.js file. Inside it, create and export a Highlight function.

export function Highlight( editor ) {
    console.log( 'Highlight plugin has been registered' );
}

Then, in the src/main.js file, import and register this function as an editor plugin.

import { Highlight } from './plugin';

const editor = await ClassicEditor.create( element, {
    licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
    plugins: [
        // Other plugins are omitted for readability - do not remove them.
        Highlight
    ]
} );

Now when the page refreshes, you should see a Highlight plugin has been registered text printed in the console. This confirms that the plugin constructor is called correctly.

In the next chapter, you will continue creating a custom plugin and learn more about model and schema, which control the state of the editor.