表格和单元格样式工具

CKEditor 5 提供了一些额外的工具，可以帮助您更改表格和表格单元格的外观。您可以控制边框颜色和样式、背景颜色、填充或文本对齐。

# 演示

将光标放在表格中的任意位置以打开表格工具栏。单击工具栏中的表格属性按钮。将打开一个弹出窗口，其中包含用于塑造整个表格外观的选项。单元格属性按钮允许您访问单个表格单元格的样式选项。

了解更多关于在表格样式弹出窗口界面中配置调色板的信息。

机器人的星球

人类一直在寻找新的地方探索，以及新的方法来到达他们想去的地方。在人类无法到达的地方，他们会派遣机器人来完成工作。火星是地球最近的邻居之一，目前是相当多的机器人设备的所在地。那些能够移动的机器人在火星的红色沙地上漫游，同时将他们的经历传回母星。

任务颜色编码
失败	成功	进行中	计划中

漫游车	着陆日期	运行时间	行驶距离	备注
PROP-M 漫游车	1971 年 11 月 27 日	0 天	0 公里	在火星坠毁时失联
PROP-M 漫游车	1971 年 12 月 2 日	0 天	0 公里	火星 3 号着陆器在着陆后约 20 秒停止通信时失联
探路者号	1997 年 7 月 4 日	85 天	100 米（330 英尺）	火星上第一个成功的漫游车
勇气号	2004 年 1 月 4 日	2269 天	7.73 公里（4.80 英里）
机遇号	2004 年 1 月 25 日	5498 天	45.16 公里（28.06 英里）	任何漫游车行驶的最长距离和运行的最长时间
好奇号	2012 年 1 月 25 日	3214 天	24.85 公里（15.44 英里）截至 2021 年 3 月 4 日	目前在运行
毅力号	2021 年 2 月 18 日	96 天	322 米（1056 英尺）截至 2021 年 5 月 14 日	目前在运行
祝融号	2021 年 5 月 14 日	11 天		目前在运行
罗莎琳德·富兰克林	2029 年（计划中）	420 天（计划中）		计划于 2028 年发射

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

# 安装

⚠️ **新的导入路径**

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

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

import { ClassicEditor, Table, TableCellProperties, TableProperties, TableToolbar } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, /* ... */ ],
        toolbar: [ 'insertTable', /* ... */ ],
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells',
                'tableProperties', 'tableCellProperties'
            ],

            tableProperties: {
                // The configuration of the TableProperties plugin.
                // ...
            },

            tableCellProperties: {
                // The configuration of the TableCellProperties plugin.
                // ...
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置样式工具

表格和单元格样式工具允许您创建带有彩色背景和边框的表格。这些颜色可以使用表格属性和单元格属性弹出窗口中的颜色面板选择。为了帮助用户为内容选择合适的颜色，您可以预先配置此类颜色面板，例如在下面的编辑器中。

一个漂亮的颜色面板

红色	粉红色	紫色	深紫色
靛蓝色	蓝色	浅蓝色	青色
蓝绿色	绿色	浅绿色	黄绿色
黄色	琥珀色	橙色	深橙色
棕色	灰色	蓝灰色	白色

在任何表格单元格内进行选择后，使用工具栏中的表格属性和单元格属性按钮来查看可用的样式和颜色选项。

# 自定义颜色面板

您可以使用这些特定的配置选项来定义背景色和边框色的自定义颜色面板，以匹配您的文档。

tableProperties.borderColors – 定义表格边框的颜色面板。
tableProperties.backgroundColors – 定义表格背景的颜色面板。
tableCellProperties.borderColors – 定义单元格边框的颜色面板。
tableCellProperties.backgroundColors – 定义单元格背景的颜色面板。

这些配置选项 **不会** 影响加载到编辑器中的数据。这意味着它们不会限制或过滤数据中的颜色。它们仅在用户界面中使用，允许用户以更方便的方式选择颜色。

例如，要为所有边框和背景配置定义相同的颜色面板，请使用以下代码片段

const customColorPalette = [
    {
        color: 'hsl(4, 90%, 58%)',
        label: 'Red'
    },
    {
        color: 'hsl(340, 82%, 52%)',
        label: 'Pink'
    },
    {
        color: 'hsl(291, 64%, 42%)',
        label: 'Purple'
    },
    {
        color: 'hsl(262, 52%, 47%)',
        label: 'Deep Purple'
    },
    {
        color: 'hsl(231, 48%, 48%)',
        label: 'Indigo'
    },
    {
        color: 'hsl(207, 90%, 54%)',
        label: 'Blue'
    },

    // More colors.
    // ...
];

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, Bold, /* ... */ ],
        toolbar: [ 'insertTable', /* ... */ ],
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells',
                'tableProperties', 'tableCellProperties'
            ],

            // Set the palettes for tables.
            tableProperties: {
                borderColors: customColorPalette,
                backgroundColors: customColorPalette
            },

            // Set the palettes for table cells.
            tableCellProperties: {
                borderColors: customColorPalette,
                backgroundColors: customColorPalette
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 默认表格和表格单元格样式

表格样式功能允许配置编辑器中表格的默认外观。配置对象应与编辑器内容样式同步。

工具栏中的 **“表格属性”** 和 **“表格单元格属性”** 按钮将显示应用于表格或表格单元格的表格和表格单元格属性。

下面显示的编辑器样式表如下所示

.ck-content .table {
    float: left;
    width: 550px;
    height: 450px;
}

.ck-content .table table {
    border-style: dashed;
    border-color: hsl(90, 75%, 60%);
    border-width: 3px;
}

.ck-content .table table td {
    text-align: center;
    vertical-align: bottom;
    padding: 10px
}

您必须将与以下相同的数值传递给编辑器配置

表格属性的 table.tableProperties.defaultProperties 对象。
表格单元格属性的 table.tableCellProperties.defaultProperties 对象。

const tableConfig = {
    table: {
        tableProperties: {
            // The default styles for tables in the editor.
            // They should be synchronized with the content styles.
            defaultProperties: {
                borderStyle: 'dashed',
                borderColor: 'hsl(90, 75%, 60%)',
                borderWidth: '3px',
                alignment: 'left',
                width: '550px',
                height: '450px'
            },
            // The default styles for table cells in the editor.
            // They should be synchronized with the content styles.
        tableCellProperties: {
            defaultProperties: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom',
                padding: '10px'
            }
            }
        }
    }
};

您应该默认将表格元素对齐到 left 侧。它的尺寸应该为 550x450px。边框样式应为 dashed，宽度为 3px，颜色指定为 Light green。

内容应该距离单元格边缘约 10px（padding），垂直对齐到 bottom，水平对齐到 center。

如果将新表格和单元格插入编辑器，则会应用相同的设置。

模糊的太空旅行者

在人类能够离开人类摇篮进入宇宙虚空之前，需要进行测试。许多动物冒着风险，有时甚至付出生命，为人类走向星辰铺平道路。

动物太空飞行始于 1940 年代后期。最初的发射使用德国 A4 火箭，但后来每个国家都开发了自己的运载工具。在太空竞赛的第一阶段，在发射人类宇航员之前，灵长类动物、犬类和啮齿类动物太空飞行员是最重要的测试对象。然而，即使在今天，动物太空飞行仍然是一件大事。 2018 年，一组啮齿动物抵达国际空间站！

按原产国分类的动物宇航员

**美国**：果蝇；灵长类动物首次飞行是在 1940 年代。

最令人难忘的是 Ham，一只黑猩猩。

**苏联**：主要是狗，从 1950 年代开始被送入太空。

最令人难忘的是 Laika，它在旅程的第一部分就死去了。

**法国**：老鼠和猫（1960 年代）。

Félicette 是最引人注目的一个，也是唯一一只幸存下来的法国猫。

**中国**：老鼠、大鼠和狗（1960 年代）。

阅读有关表格和表格单元格功能的所有支持属性的更多信息，请参阅其 API 文档。

默认表格和表格单元格样式 **会** 影响加载到编辑器中的数据。默认属性不会保留在编辑器模型中。

# 通用 API

# UI 组件

TableProperties 和 TableCellProperties 插件注册以下 UI 组件

组件名称	注册者
`'tableProperties'` 按钮	`TableProperties`
`'tableCellProperties'` 按钮	`TableCellProperties`

# 工具栏

TableProperties 和 TableCellProperties 插件允许将 tableProperties 和 tableCellProperties 项添加到工具栏。您可以配置其内容。

# 编辑器命令

命令名称	命令类	属于（顶级插件）
`'tableBorderColor'`	`TableBorderColorCommand`	`TableProperties`
`'tableBorderStyle'`	`TableBorderStyleCommand`
`'tableBorderWidth'`	`TableBorderWidthCommand`
`'tableAlignment'`	`TableAlignmentCommand`
`'tableWidth'`	`TableWidthCommand`
`'tableHeight'`	`TableHeightCommand`
`'tableBackgroundColor'`	`TableBackgroundColorCommand`
`'tableCellBorderStyle'`	`TableCellBorderStyleCommand`	`TableCellProperties`
`'tableCellBorderColor'`	`TableCellBorderColorCommand`
`'tableCellBorderWidth'`	`TableCellBorderWidthCommand`
`'tableCellHorizontalAlignment'`	`TableCellHorizontalAlignmentCommand`
`'tableCellWidth'`	`TableCellWidthCommand`
`'tableCellHeight'`	`TableCellHeightCommand`
`'tableCellPadding'`	`TableCellPaddingCommand`
`'tableCellBackgroundColor'`	`TableCellBackgroundColorCommand`
`'tableCellVerticalAlignment'`	`TableCellVerticalAlignmentCommand`

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

# 贡献

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

我们每天都在努力使我们的文档保持完整。您是否发现过时信息？是否缺少内容？请通过我们的问题追踪器报告。

随着 42.0.0 版本的发布，我们重写了大部分文档以反映新的导入路径和功能。我们感谢您的反馈，帮助我们确保文档的准确性和完整性。