@ckeditor/ckeditor5-editor-multi-root

Creating a Multi-Root Editor

This code demonstrates how to create a multi-root editor instance with two editable areas: 'header' and 'content'. The editor is initialized with these two roots, allowing you to manage both areas within a single editor instance.

const MultiRootEditor = require('@ckeditor/ckeditor5-editor-multi-root/src/multirooteditor');
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');

MultiRootEditor.create({
    header: document.querySelector('#header'),
    content: document.querySelector('#content')
}).then(editor => {
    console.log('Editor was initialized', editor);
}).catch(error => {
    console.error(error.stack);
});

Adding Plugins to Multi-Root Editor

This code sample shows how to add plugins to the multi-root editor. In this example, the Essentials, Paragraph, and Bold plugins are added, and the toolbar is configured to include the 'bold' button.

const MultiRootEditor = require('@ckeditor/ckeditor5-editor-multi-root/src/multirooteditor');
const Essentials = require('@ckeditor/ckeditor5-essentials/src/essentials');
const Paragraph = require('@ckeditor/ckeditor5-paragraph/src/paragraph');
const Bold = require('@ckeditor/ckeditor5-basic-styles/src/bold');

MultiRootEditor.create({
    header: document.querySelector('#header'),
    content: document.querySelector('#content')
}, {
    plugins: [ Essentials, Paragraph, Bold ],
    toolbar: [ 'bold' ]
}).then(editor => {
    console.log('Editor with plugins was initialized', editor);
}).catch(error => {
    console.error(error.stack);
});

Accessing and Modifying Editor Data

This code demonstrates how to access and modify the data in different roots of the multi-root editor. You can get the data from a specific root and set new data for a specific root.

const MultiRootEditor = require('@ckeditor/ckeditor5-editor-multi-root/src/multirooteditor');

MultiRootEditor.create({
    header: document.querySelector('#header'),
    content: document.querySelector('#content')
}).then(editor => {
    // Accessing data
    const headerData = editor.getData({ rootName: 'header' });
    const contentData = editor.getData({ rootName: 'content' });
    console.log('Header Data:', headerData);
    console.log('Content Data:', contentData);

    // Modifying data
    editor.setData('<p>New header content</p>', { rootName: 'header' });
    editor.setData('<p>New content area</p>', { rootName: 'content' });
}).catch(error => {
    console.error(error.stack);
});