CKEditor5

Customized configuration

There is also the option to create a custom configuration, this requires you to define all plugins that will be used and the toolbar layout.
The Essentials and Paragraph plugins MUST be included for CKeditor to function. Failure to do so will result in a text field that doesn't respond to input.

To add your custom config you have to add your configuration to window.simpleCkEditorConfig, window.advancedCkEditorConfig or window.markdownCkEditorConfig.

A properly formatted configuration looks like this:

//  resources/js/app.js //

import {Essentials} from '@ckeditor/ckeditor5-essentials';
import {Autoformat} from '@ckeditor/ckeditor5-autoformat';
import {Bold, Italic} from '@ckeditor/ckeditor5-basic-styles';
import {BlockQuote} from '@ckeditor/ckeditor5-block-quote';
import {Heading} from '@ckeditor/ckeditor5-heading';
import {Link} from '@ckeditor/ckeditor5-link';
import {List} from '@ckeditor/ckeditor5-list';
import {Paragraph} from '@ckeditor/ckeditor5-paragraph';
import {Alignment} from '@ckeditor/ckeditor5-alignment';
import {Image, AutoImage} from '@ckeditor/ckeditor5-image';
import {MediaEmbed} from '@ckeditor/ckeditor5-media-embed';

const locale = $('html').attr('locale')

window.advancedCkEditorConfig = {
    plugins: [
        Essentials,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        Heading,
        Link,
        List,
        Paragraph,
        Alignment,
        Image,
        AutoImage,
        MediaEmbed
    ],
    alignment: {
        options: ['left', 'center', 'right']
    },
    toolbar: {
        items: [
            'undo', 'redo',
            '|', 'heading',
            '|', 'bold', 'italic', 'alignment', 'link', 'blockQuote', "mediaEmbed",
            '|', 'bulletedList', 'numberedList'
        ]
    },
    heading: {
        options: [
            {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
            {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
            {model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
        ]
    },
    language: locale
};

Now run npm run dev and it should compile.

Further reading here

Adding plugins

More official plugins can be added by installing npm packages from npm and following Customized configuration where you have to import the plugin overwrite the default configuration with one that includes the plugin(s) you have imported.