文档编辑器

该文档编辑器示例展示了为文档编辑设计的文档编辑器构建，它具有定制的 UI，代表纸张布局。它是在DecoupledEditor类的基础上创建的，并充分利用了它提供的优势：可以自由选择应用程序中关键 UI 元素的位置。

在本教程中，您将学习如何逐步创建自己的文档编辑器，并具有定制的用户界面。

# 编辑器

文档编辑器构建包含完成任务所需的所有功能。您需要做的就是导入它并创建一个新实例。

文档编辑器可以使用 DOM 中现有的数据容器创建。它还可以接受原始数据字符串，并自行创建可编辑内容。要获取输出数据，请使用getData()方法。

import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document/src/ckeditor';

DecoupledEditor
    .create( document.querySelector( '.document-editor__editable' ), {
        cloudServices: {
            // A configuration of CKEditor Cloud Services.
            // ...
        }
    } )
    .then( editor => {
        const toolbarContainer = document.querySelector( '.document-editor__toolbar' );

        toolbarContainer.appendChild( editor.ui.view.toolbar.element );

        window.editor = editor;
    } )
    .catch( err => {
        console.error( err );
    } );

您可能已经注意到，您必须确保编辑器 UI 在其触发EditorUI#ready事件后注入您的应用程序。工具栏元素可以在editor.ui.view.toolbar.element中找到。

# 用户界面

您刚刚创建的代码将运行编辑器，但用户界面仍然缺失。从一个基本的 HTML 结构开始，用于托管编辑器组件（工具栏和可编辑内容）。

# HTML

以下结构有两个容器，对应于您刚刚使用的配置。编辑器将在启动时将工具栏和可编辑内容注入到相应的容器中。

<div class="document-editor">
    <div class="document-editor__toolbar"></div>
    <div class="document-editor__editable-container">
        <div class="document-editor__editable">
            <p>The initial editor data.</p>
        </div>
    </div>
</div>

<div class="document-editor">...</<div>元素是文档编辑器的最外层容器，尽管不是必需的，但建议使用它来保持一致性。

# 样式

样式是文档编辑器真正需要实现的东西。从主容器的样式开始

.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);

    /* Set vertical boundaries for the document editor. */
    max-height: 700px;

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}

然后，使工具栏看起来像浮动在“页面”之上

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

/* Adjust the look of the toolbar inside the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}

可编辑内容应看起来像一张纸，在其可滚动容器中居中

/* Make the editable container look like the inside of a native word processor application. */
.document-editor__editable-container {
    padding: calc( 2 * var(--ck-spacing-large) );
    background: var(--ck-color-base-foreground);

    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
}

.document-editor__editable-container .ck-editor__editable {
    /* Set the dimensions of the "page". */
    width: 15.8cm;
    min-height: 21cm;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    border: 1px hsl( 0,0%,82.7% ) solid;
    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
}

现在您需要做的就是设置编辑器实际内容的样式。从定义一些基本字体样式开始

/* Set the default font for the "page" of the content. */
.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

然后关注标题和段落。请注意，用户在标题下拉菜单中看到的内容应与实际编辑的内容相对应，以获得最佳的用户体验。

/* Adjust the headings dropdown to host some larger heading styles. */
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */
.document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.63em;
    padding-top: .5em;
    margin-bottom: 1.13em;
}

一个最终的修饰，使块引用更加精致，样式就完成了。

/* Make the block quoted text serif with some additional spacing. */
.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
}

# 总结

文档编辑器已准备好使用。不过，您可能希望配置一些功能，例如突出显示、字体大小或字体系列，以获得最佳的编辑体验。

由于使用DecoupledEditor作为基础，您可以快速尝试和创建自定义用户界面布局，同时保留功能集、可访问性支持（例如键盘导航在工具栏中）等等。