Initial root data.
' } ); ``` **Note**: This method signature is deprecated and will be removed in one of the next releases. Use the signature with root options object instead [`addRoot( rootName, options )`](#function-addRoot:ROOT_CONFIG). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts#L436) #### Parameters * `rootName: string` Name of the root to add. * `options?: AddRootOptions` Additional options for the added root. #### Returns * `void` ### `addRoot( rootName, options? ) → void` Adds a new root to the editor. ```typescript editor.addRoot( 'myRoot', { initialData: 'Initial root data.
' } ); ``` After a root is added, you will be able to modify and retrieve its data. All root names must be unique. An error will be thrown if you will try to create a root with the name same as an already existing, attached root. However, you can call this method for a detached root. See also [`detachRoot`](#function-detachRoot). Whenever a root is added, the editor instance will fire [`addRoot` event](#event-addRoot). The event is also called when the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration. Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root. Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can be changed only using the editor API. To create a DOM editable element for the root, listen to [`addRoot` event](#event-addRoot) and call [`createEditable`](#function-createEditable:OPTIONS). Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements. ```typescript editor.on( 'addRoot', ( evt, root ) => { const editableElement = editor.createEditable( root ); // You may want to create a more complex DOM structure here. // // Alternatively, you may want to create a DOM structure before // calling `editor.addRoot()` and only append `editableElement` at // a proper place. document.querySelector( '#editors' ).appendChild( editableElement ); } ); // ... editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element. ``` You can set root attributes on the new root while you add it: ```typescript // Add a collapsed root at fourth position from top. // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes. editor.addRoot( 'myRoot', { modelAttributes: { isCollapsed: true, index: 4 } } ); ``` Note that attributes added together with a root are automatically registered. See also [`MultiRootEditor#registerRootAttribute()`](#function-registerRootAttribute) and [`config.roots.This is editor!
' ``` If your editor implementation uses multiple roots, you should pass root name as one of the options: ```typescript editor.getData( { rootName: 'header' } ); // -> 'Content for header part.
' ``` By default, the editor outputs HTML. This can be controlled by injecting a different data processor. See the [Markdown output](../features/markdown.md) guide for more details. A warning is logged when you try to retrieve data for a detached root, as most probably this is a mistake. A detached root should be treated like it is removed, and you should not save its data. Note, that the detached root data is always an empty string. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-core/src/editor/editor.ts#L820) #### Parameters * `options?: object` Additional configuration for the retrieved data. Editor features may introduce more configuration options that can be set through this parameter. Properties * `options.rootName?: string` Root name. Defaults to `'main'`. * `options.trim?: 'none' | 'empty'` Whether returned data should be trimmed. This option is set to `'empty'` by default, which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming use `'none'`. In such cases exact content will be returned (for example `''` for an empty editor). * `options.[key: string]: unknown` #### Returns * `string` Output data. ### `getFullData( options? ) → Record
This is editor!
' ); ``` If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor root names and values equal to the data that should be set in each root: ```typescript editor.setData( { header: 'Content for header part.
', content: 'Content for main part.
', footer: 'Content for footer part.
' } ); ``` By default the editor accepts HTML. This can be controlled by injecting a different data processor. See the [Markdown output](../features/markdown.md) guide for more details. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-core/src/editor/editor.ts#L789) #### Parameters * `data: string | RecordExciting intro text to an article.
', content: 'Lorem ipsum dolor sit amet.
', sidePanelLeft: 'Strong quotation from article.', sidePanelRight: '
List of similar articles...
', outro: 'Closing text.
' } ) .then( editor => { console.log( 'Editor was initialized', editor ); // Append the toolbar inside a provided DOM element. document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element ); // Append DOM editable elements created by the editor. const editables = editor.ui.view.editables; const container = document.querySelector( '#editable-container' ); container.appendChild( editables.intro.element ); container.appendChild( editables.content.element ); container.appendChild( editables.outro.element ); } ) .catch( err => { console.error( err.stack ); } ); ``` This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor. #### Using an existing DOM element (and data provided in `config.roots.Exciting intro text to an article.
' }, content: { initialData: 'Lorem ipsum dolor sit amet.
' }, sidePanelLeft: { initialData: 'Strong quotation from article.' }, sidePanelRight: { initialData: '
List of similar articles...
' }, outro: { initialData: 'Closing text.
' } } } ) .then( editor => { console.log( 'Editor was initialized', editor ); // Append the toolbar inside a provided DOM element. document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element ); } ) .catch( err => { console.error( err.stack ); } ); ``` This method can be used to initialize the editor on an existing element with the specified content in case if your integration makes it difficult to set the content of the source element. Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration. #### Configuring the editor See the [editor configuration documentation](module_core_editor_editorconfig-EditorConfig.md) to learn more about customizing plugins, toolbar and more. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts#L1135) #### Parameters * `sourceElementsOrData: RecordExciting intro text to an article.
' }, content: { initialData: 'Lorem ipsum dolor sit amet.
' }, sidePanelLeft: { initialData: 'Strong quotation from article.' }, sidePanelRight: { initialData: '
List of similar articles...
' }, outro: { initialData: 'Closing text.
' } } } ) .then( editor => { console.log( 'Editor was initialized', editor ); // Append the toolbar inside a provided DOM element. document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element ); // Append DOM editable elements created by the editor. const editables = editor.ui.view.editables; const container = document.querySelector( '#editable-container' ); container.appendChild( editables.intro.element ); container.appendChild( editables.content.element ); container.appendChild( editables.outro.element ); } ) .catch( err => { console.error( err.stack ); } ); ``` This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor. #### Using an existing DOM element (and data provided in `config.roots.Exciting intro text to an article.
' }, content: { element: document.querySelector( '#editor-content' ), initialData: 'Lorem ipsum dolor sit amet.
' }, sidePanelLeft: { element: document.querySelector( '#editor-side-left' ), initialData: 'Strong quotation from article.' }, sidePanelRight: { element: document.querySelector( '#editor-side-right' ), initialData: '
List of similar articles...
' }, outro: { element: document.querySelector( '#editor-outro' ), initialData: 'Closing text.
' } } } ) .then( editor => { console.log( 'Editor was initialized', editor ); // Append the toolbar inside a provided DOM element. document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element ); } ) .catch( err => { console.error( err.stack ); } ); ``` This method can be used to initialize the editor on an existing element with the specified content in case if your integration makes it difficult to set the content of the source element. #### Configuring the editor See the [editor configuration documentation](module_core_editor_editorconfig-EditorConfig.md) to learn more about customizing plugins, toolbar and more. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts#L998) #### Parameters * `config: EditorConfig` The editor configuration. #### Returns * `Promise