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

指南表格标题

The TableCaption 插件允许您为表格添加标题。表格标题还可以提高可访问性，因为屏幕阅读器可以识别它们。

# 演示

在下面的演示中，单击表格标题以编辑它。单击标题后，可以使用表格工具栏按钮 表格标题 切换标题的显示与隐藏。

太阳系的行星

名称 质量 (1024kg) 直径 (km) 重力 (m/s2) 日长 (小时) 距太阳距离 (106km) 平均温度 (°C)
水星 0.330 4,879 3.7 4222.6 57.9 167
金星 4.87 12,104 8.9 2802.0 108.2 464
地球 5.97 12,756 9.8 24.0 149.6 15
火星 0.642 6,792 3.7 24.7 227.9 -65
木星 1898 142,984 23.1 9.9 778.6 -110
土星 568 120,536 9.0 10.7 1433.5 -140
天王星 86.8 51,118 8.7 17.2 2872.5 -195
海王星 102 49,528 11.0 16.1 4495.1 -200
行星数据来自 Nasa’s Planetary Fact Sheet – Metric.

此演示仅展示了有限的功能集。访问 功能丰富的编辑器示例 以查看更多实际应用。

# 安装

⚠️ 新的导入路径

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

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

import { ClassicEditor, Table, TableCaption, TableToolbar } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, TableCaption, /* ... */ ],
        toolbar: [ 'insertTable', /* ... */ ],
        table: {
            contentToolbar: [
                'toggleTableCaption'
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

默认情况下，表格标题放置在表格上方。您可以通过在 内容样式 中为 .ck-content .table > figcaption 样式设置 caption-side 来更改放置位置。将其更改为 caption-side: bottom 将使标题显示在表格下方。

# 通用 API

# UI 组件

The TableCaption 插件注册了以下 UI 组件

  • toggleTableCaption 按钮

# 工具栏

TableCaption 插件允许将 toggleTableCaption 项目添加到工具栏。可以 配置 它的内容。

# 编辑器命令

命令 名称 命令类 属于 (顶级插件)
'toggleTableCaption' ToggleTableCaptionCommand TableCaption

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

# 贡献

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