magnolia-ckeditor5-bookmark

magnolia-ckeditor5-bookmark is a free bookmark plugin for CKEditor 5. It is a slightly modified version of @ckpro/ckeditor5-bookmark. It solves the problem of creating bookmarks, <a id="bookmark-name"></a>, in bigger documents. You can then use the official CKEditor 5 Link plugin to create links to your bookmarks : <a href="#bookmark-name">Bookmark Name</a> What is more important, this package is ready to be used by @magnolia/ckeditor5-plugins module that creates the custom build CKEditor5 v41, the version that is used by latest Magnolia v6.3. (The official CKEditor v41 does not include bookmark plugin)

Below is a short usage documentation.

//#1 : In your CKEditor5 build file ADD a reference to magnolia-ckeditor5-bookmark:

// app.js

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Bookmark from 'magnolia-ckeditor5-bookmark'; // ADD THIS
// ...

export default class ClassicEditor extends ClassicEditorBase { }

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    Bookmark // ADD THIS
    // ...
]

//#2 : Then creating the CKEditor5 add the bookmark button :

ClassicEditor.create(document.querySelector('#editor'), {
    toolbar: [
        'heading',
        'bold',
        'italic',
        'bookmark' // ADD THIS
        
        // ...
    ]

    // ...
});