文档编辑器

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

在本教程中，您将学习如何一步一步地创建自己的带有自定义用户界面的文档编辑器。

# 编辑器

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

import { DecoupledEditor } from 'ckeditor5';

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 用作基础，因此您可以在保持功能集、可访问性支持（例如，工具栏中的键盘导航）等的同时，快速实验和创建自定义用户界面布局。