CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/功能

指南文本对齐

对齐功能允许您将内容对齐到左侧或右侧，以及居中或两端对齐。

# 演示

点击段落或标题内的任何位置，然后使用工具栏下拉菜单 文本对齐 更改元素的对齐方式。

从旅行中学到的三件最棒的事情

像地球上所有美好的事物一样，旅行通过榜样教导我们。以下是我多年旅行过程中学到的最宝贵的经验教训。

欣赏多样性

习惯于完全不同的文化可能具有挑战性。虽然从网上或书籍中了解文化也很好，但没有任何体验能够比得上亲身感受文化多样性。您会学会欣赏每一个差异，同时变得更加文化流动。

此演示展示了一组有限的功能。访问 功能丰富的编辑器示例 以查看更多实际操作。

# 安装

⚠️ 新的导入路径

从 版本 42.0.0 开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是 CKEditor 5 的旧版本，请参考 旧版设置中的包 指南。

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

import { ClassicEditor, Alignment } from 'ckeditor5';

ClassicEditor.
    create( document.querySelector( '#editor' ), {
        plugins: [ Alignment, /* ... */ ],
        toolbar: [ 'alignment', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置对齐选项

# 定义可用选项

可以通过设置 alignment.options 配置选项来配置编辑器中可用的对齐选项。您可以从 'left'、'right'、'center' 和 'justify' 中进行选择。

对于 LTR 内容，您应该始终包含 'left' 选项。类似地，对于 RTL 内容，您应该始终包含 'right' 选项。详细了解 配置编辑器内容的语言。

例如，以下编辑器将支持两种对齐选项：左对齐和右对齐

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        alignment: {
            options: [ 'left', 'right' ]
        },
        toolbar: [
            'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

从旅行中学到的三件最棒的事情

像地球上所有美好的事物一样，旅行通过榜样教导我们。以下是我多年旅行过程中学到的最宝贵的经验教训。

# 使用类而不是内联样式

默认情况下，对齐使用 text-align CSS 属性进行内联设置。如果您希望功能输出更具语义性的内容，该内容使用类而不是内联样式，则可以通过在 config.alignment.options 中使用 className 属性指定类名，并使用样式表对其进行样式设置。

一旦您决定使用类进行对齐，您必须在 config.alignment.options 中为所有对齐条目定义className。

以下配置将分别将.my-align-left 和 .my-align-right 设置为左对齐和右对齐。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        alignment: {
            options: [
                { name: 'left', className: 'my-align-left' },
                { name: 'right', className: 'my-align-right' }
            ]
        },
        toolbar: [
            'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置工具栏

您可以选择使用对齐下拉菜单（'alignment'）或配置工具栏以使用单独的按钮来代表每个选项。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [
            'heading', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

从旅行中学到的三件最棒的事情

像地球上所有美好的事物一样，旅行通过榜样教导我们。以下是我多年旅行过程中学到的最宝贵的经验教训。

CKEditor 5 有更多功能可以帮助您组织内容。

  • 文档标题 – 清晰地将您的内容分成标题和正文。
  • 标题 – 将您的内容分成逻辑部分。
  • 块缩进 – 将您的内容组织成视觉上分开的块，缩进关键段落等。
  • 块引用 – 在富文本内容中包含块引用或摘录。
  • 移除格式 – 轻松清理基本的文本格式。

# 通用 API

Alignment 插件注册

  • 下拉菜单：'alignment'。

  • 按钮：'alignment:left'，'alignment:right'，'alignment:center'，'alignment:justify'。

    选项数量及其名称基于 alignment.options 配置选项。

  • 命令：'alignment'

    您可以通过执行以下命令之一来对齐当前选定的块。

    editor.execute( 'alignment', { value: 'center' } );

我们建议使用官方的 CKEditor 5 检查器 进行开发和调试。它将为您提供有关编辑器状态的大量有用信息，例如内部数据结构、选择、命令等等。

# 内容兼容性

Alignment 插件为已弃用的 align 属性提供支持。

具有 align 属性的块元素（例如 <p>）被插件接受，但编辑器始终以现代格式返回标记，因此转换仅为单向。

# 贡献

该功能的源代码可在 GitHub 上获得：https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-alignment。