块级缩进

块级缩进功能允许您为文本块（例如段落、标题或列表）设置缩进。这样可以直观地区分内容的不同部分。

# 演示

使用以下编辑器中的缩进 或取消缩进 工具栏按钮来更改缩进级别。在不同的元素上尝试：段落、标题和列表项。

# 安装

在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中。

import { ClassicEditor, Indent, IndentBlock } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Indent, IndentBlock, /* ... */ ],
        toolbar: [ 'outdent', 'indent', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置块级缩进功能

此功能提供一些配置选项，可用于调整文本块缩进行为。它由三个插件实现： Indent、 IndentBlock 和 List。

# 使用偏移量和单位

默认情况下，块级缩进功能会使用给定的单位，根据给定的偏移量增加或减少当前缩进。

上面 演示 部分中的富文本编辑器使用默认配置，该配置定义了一个 40px 的缩进步长。

您可以将该值更改为例如 1em。

import { ClassicEditor, Indent } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Indent, /* ... */ ],
        toolbar: {
            items: [ 'heading', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
        },
        indentBlock: {
            offset: 1,
            unit: 'em'
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 使用 CSS 类

如果您希望在内容中使用更多语义，请使用 CSS 类而不是固定的缩进单位。然后，您可以在需要时调整应用程序样式表中的级别。

以下是配置块级缩进功能以通过应用定义的 CSS 类之一来设置缩进的方法。

import { ClassicEditor, Indent, IndentBlock } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Indent, IndentBlock, /* ... */ ],
        toolbar: {
            items: [ 'heading', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
        },
        indentBlock: {
            classes: [
                'custom-block-indent-a', // First step - smallest indentation.
                'custom-block-indent-b',
                'custom-block-indent-c'  // Last step - biggest indentation.
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

使用类而不是固定单位 (px 或 em) 还有另一个优势 - 你可以控制文档中使用的缩进级别。例如，你可以将缩进限制为 2 或 3 个不同的级别，用户无法超过这个限制。在上面的示例中，.custom-block-indent-c 类级别是允许的最大缩进值。这将有助于保持你的内容整洁和可预测。

在此配置中，所见即所得编辑器会将缩进级别限制在提供的类集内。数组中最后一个索引的类具有最大的缩进。

在下面的演示中，CSS 类定义如下：

.custom-block-indent-a {
    margin-left: 10%;
}

.custom-block-indent-b {
    margin-left: 20%;
}

.custom-block-indent-c {
    margin-left: 30%;
}

# 缩进列表

除了控制文本块缩进外，相同的按钮集 (outdent, indent) 也允许缩进列表项（嵌套它们）。

此机制对用户完全透明。从代码角度来看，按钮由 Indent 插件实现，但这些按钮或相应的命令默认情况下不实现任何功能。

目标行为来自另外两个插件：

• IndentBlock - 缩进块功能控制段落和标题等元素的缩进。
• List - 列表功能实现列表的缩进（嵌套）。

这意味着，如果你只想允许缩进列表，可以通过仅加载 Indent 和 List 插件来实现。如果你想要完整的行为，你需要加载所有 3 个插件（Indent、IndentBlock 和 List）。

# 相关功能

以下是一些 CKEditor 5 功能，可以帮助你更好地组织内容：

• 块引用 - 在你的富文本内容中包含块引用或摘录。
• 标题 - 将你的内容划分为多个部分。
• 代码块 - 插入更长的多行代码列表。
• 文本对齐 - 因为内容是左对齐、右对齐、居中对齐还是两端对齐很重要。

# 通用 API

Indent 插件注册以下组件：

• 'indent' 命令。

  此命令本身不实现任何缩进行为。它会执行 indentBlock（如下所述）或 indentList，具体取决于哪个命令已启用。

  在上面的 缩进列表 部分中阅读更多内容。

• 'outdent' 命令。

  此命令本身不实现任何缩进行为。它会执行 outdentBlock（如下所述）或 outdentList，具体取决于哪个命令已启用。

  在上面的 缩进列表 部分中阅读更多内容。

IndentBlock 插件注册以下组件：

• 'indentBlock' 命令。

  你可以通过以下方法增加包含选择的文本块的缩进：

  editor.execute( 'indentBlock' );
  

• 'outdentBlock' 命令。

  你可以通过以下方法减少包含选择的文本块的缩进：

  editor.execute( 'outdentBlock' );
  

# 贡献

该功能的源代码在 GitHub 上可用，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-font。