CKEditor 生态系统文档
Search
主页/CKEditor 5/示例

guide多根编辑器

多根编辑器类型是一种具有多个独立可编辑区域的编辑器类型。

使用多根编辑器与使用多个独立编辑器（如内联编辑器演示）的主要区别在于，在多根编辑器中，所有可编辑区域都属于同一个编辑器实例，共享相同的配置、工具栏和撤销堆栈，并生成一个文档。

本月目的地

Picture of a sunlit facade of a Maltan building.
在瓦莱塔享受午睡时光。

瓦莱塔

马耳他的首都瓦莱塔是今年夏天的首选目的地。这里拥有尖端的现代建筑、巴洛克杰作、美味的当地美食，以及至少 8 个月的阳光。它也是电影制片人的首选目的地，所以你可以参观《权力的游戏》、《角斗士》、《特洛伊》等电影中的熟悉场景。

旅行带给你的三大收获

了解更多

漫步欧洲首都：华沙

了解更多

# 编辑器示例配置

查看快速入门指南，了解有关实现这种编辑器的更多信息。您将在其中找到实现步骤。您可以在下面看到此示例编辑器的代码。

查看编辑器配置脚本 
import {
    MultiRootEditor,
    Essentials,
    Bold,
    Italic,
    Heading,
    Link,
    Table,
    MediaEmbed,
    List,
    Indent
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

MultiRootEditor
    .create(
        // Define roots / editable areas:
        {
            header: document.querySelector( '#header' ),
            content: document.querySelector( '#content' ),
            leftSide: document.querySelector( '#left-side' ),
            rightSide: document.querySelector( '#right-side' )
        },
        // Editor configration:
        {
            plugins: [
                Essentials,
                Heading,
                Bold,
                Italic,
                Link,
                Table,
                MediaEmbed,
                List,
                Indent
            ],
            toolbar: {
                items: [
                    'undo', 'redo',
                    '|', 'heading',
                    '|', 'bold', 'italic',
                    '|', 'link', 'insertTable', 'mediaEmbed',
                    '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
                ]
            }
        }
    )
    .then( editor => {
        window.editor = editor;

        // Append toolbar to a proper container.
        const toolbarContainer = document.querySelector( '#toolbar' );
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );

        // Make toolbar sticky when the editor is focused.
        editor.ui.focusTracker.on( 'change:isFocused', () => {
            if ( editor.ui.focusTracker.isFocused ) {
                toolbarContainer.classList.add( 'sticky' );
            } else {
                toolbarContainer.classList.remove( 'sticky' );
            }
        } );
    } )
    .catch( error => {
        console.error( 'There was a problem initializing the editor.', error );
    } );
查看编辑器内容列表 
<div id="toolbar"></div>
<!--
    Wrapping the structure inside a pair of
    contenteditable="true" + contenteditable="false" elements
    is required to provide proper caret handling when
    using arrow keys at the start and end of an editable area.

    You can skip them if you don't want to move the
    caret between editable areas using arrow keys.
!-->
<div contenteditable="true">
    <div contenteditable="false">
        <div class="editor">
            <div id="header">
                Header content is inserted here.
            </div>
        </div>
        <div class="editor">
            <div id="content">
                Main content is inserted here.
            </div>
        </div>
        <div class="boxes">
            <div class="box box-left editor">
                <div id="left-side">
                    Left-side box content is inserted here.
                </div>
            </div>
            <div class="box box-right editor">
                <div id="right-side">
                    Right-side box content is inserted here.
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .editor {
        border: #ccced1 1px solid;
        margin-top: 10px;
    }

    .boxes {
        margin-top: 10px;
        display: flex;
    }

    .box {
        margin-top: 0px;
        width: 50%;
    }

    /*
        Make the editable "fill" the whole box.
        The box will grow if the other box grows too.
        This makes the whole box "clickable".
    */
    .box .ck-editor__editable {
        height: 100%;
    }

    .box-left {
        margin-right: 10px;
    }

    /*
        When toolbar receives this class, it becomes sticky.
        If the toolbar would be scrolled outside of the visible area,
        instead it is kept at the top edge of the window.
    */
    #toolbar.sticky {
        position: sticky;
        top: 0px;
        z-index: 10;
    }
</style>

# 设置和读取编辑器数据

请注意，设置和读取多根编辑器的数据有所不同。

设置编辑器数据时传递一个对象

使用 editor.setData() 设置数据

    editor.setData( {
        header: '<p>Content for header part.</p>',
        content: '<p>Content for main part.</p>',
        leftSide: '<p>Content for left-side box.</p>',
        rightSide: '<p>Content for right-side box.</p>'
    } );

通过 config.initialData 设置数据

    MultiRootEditor.create(
        {
            header: document.querySelector( '#header' ),
            content: document.querySelector( '#content' ),
            leftSide: document.querySelector( '#left-side' ),
            rightSide: document.querySelector( '#right-side' )
        },
        {
            initialData: {
                header: '<p>Content for header part.</p>',
                content: '<p>Content for main part.</p>',
                leftSide: '<p>Content for left-side box.</p>',
                rightSide: '<p>Content for right-side box.</p>'
            }
        }
    );
在获取数据时指定根名称 
    editor.getData( { rootName: 'leftSide' } ); // -> '<p>Content for left-side box.</p>'

了解如何在API 文档中使用多根编辑器。