富文本

SpreadJS 通过允许用户为工作表中的行标题、列标题和视区区域中的文本进行样式设置，支持单元格中的富文本格式。富文本格式使用户能够增强电子表格的美观外观并有效地操作数据。

在 SpreadJS 中使用 RichText 时可用的样式选项如下：

font: 在单个电子表格单元格中的文本中添加各种字体样式、字体大小和字体系列
foreColor: 为电子表格单元格中的文本添加多种颜色
vertAlign: 为电子表格单元格中的文本添加上标和下标。这对于在电子表格中添加科学和数学公式非常有用
textDecoration: 为电子表格单元格中的文本添加不同的文本装饰样式类型，例如下划线、双下划线、删除线、上划线等
listType: 在电子表格单元格中的文本中添加有序和无序列表

应用格式

将富文本格式应用于单元格后，会将单元格值转换为普通值。默认情况下，当您在单元格中输入文本信息时，工作表视区区域中的字母会显示为无任何格式的样式，如下图中的单元格 A1 所示。然而，当您在单元格中应用富文本格式时，字母将如图中单元格 A3 所示。

用户可以将富文本格式应用于列标题和行标题，如下图所示。

应用样式

用户还可以对单元格中的文本应用上标、下标和文本装饰样式，如下图所示：

应用富文本格式到单元格不仅可以帮助用户呈现不同的文本样式，如文本对齐、垂直方向文本、自动换行、文本缩进等，还可以增强电子表格的视觉外观。包括 JSON 序列化和反序列化、Excel I/O、自适应大小、自动适应等一些内置功能也得到支持。

富文本数据支持以下 JSON 架构：

{
    "RichText": {
        "items": {
            "description": "Specifies a rich text.",
            "properties": {
                "style": {
                    "properties": {
                        "font": {
                            "type": "string"
                        },
                        "foreColor": {
                            "type": "string"
                        },
                        "textDecoration": {
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/TextDecorationType"
                                },
                                {
                                    "type": "null"
                                }
                            ],
                            "default": 0
                        },
                        "vertAlign": {
                            "$ref": "#/definitions/VertAlign"
                        }
                    },
                    "type": "object"
                },
                "text": {
                    "type": "string"
                }
            },
            "type": "object"
        },
        "title": "RichText",
        "type": "array"
    },
    "SheetModel": {
        "description": "Represent a data model for worksheet.",
        "properties": {
            "dataTable": {
                "patternProperties": {
                    "[0-9]+": {
                        "patternProperties": {
                            "[0-9]+": {
                                "properties": {
                                    "value": {
                                        "properties": {
                                            "richText": {
                                                "$ref": "#/definitions/RichText"
                                            },
                                            "text": {
                                                "type": "string"
                                            }
                                        },
                                        "type": [
                                            "array",
                                            "boolean",
                                            "number",
                                            "null",
                                            "object",
                                            "string"
                                        ]
                                    }
                                },
                                "type": "object"
                            }
                        },
                        "type": "object"
                    }
                },
                "type": "object"
            }
        },
        "title": "SheetModel",
        "type": "object"
    },
    "VertAlign": {
        "description": "Specifies a subscript text or a superscript text. Normal: 0, superscript: 1, subscript: 2.",
        "enum": [
            0,
            1,
            2
        ],
        "title": "VertAlign"
    }
}

以下代码示例使用 setValue 方法在工作表的列标题单元格、行标题单元格和视区区域单元格中设置具有不同样式选项的富文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!--jquery refrence-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
    <!--CSS files-->
    <link href="css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" />
    <!--Script files-->
    <script type="text/javascript" src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <script>
        window.onload = function () {
            // Configure Workbook and Worksheet
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var sheet = spread.getActiveSheet();
            var SpreadJS =
            {
                richText: [{
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(78,133,242)"

                    },
                    text: "S"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(228,65,52)"

                    },
                    text: "p"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(247,188,32)"

                    },
                    text: "r"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(78,133,242)"

                    },
                    text: "e"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(65,168,87)"

                    },
                    text: "a"
                },
                {
                    style: {
                        font: "bold 36px Calibri",
                        foreColor: "rgb(228,65,54)"

                    },
                    text: "d"
                }
                ]
            };
            var sJS =
            {
                richText: [
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(78,133,242)"
                        },
                        text: "S"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(65,168,87)"
                        },
                        text: "p"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(247,188,32)"
                        },
                        text: "r"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(78,133,242)"
                        },
                        text: "e"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(65,168,87)"
                        },
                        text: "a"
                    },
                    {
                        style: {
                            font: "bold 24px Calibri",
                            foreColor: "rgb(228,65,54)"
                        },
                        text: "d"
                    }
                ]
            };

            var lawOfUniversalGravitation = {
                richText: [
                    {
                        style: {
                            font: "normal 24px Calibri"
                        },
                        text: "F = (G * M"
                    },
                    {
                        style: {
                            font: "normal 24px Calibri",
                            vertAlign: 2
                        },
                        text: "1"
                    },
                    {
                        style: {
                            font: "normal 24px Calibri"
                        },
                        text: " * M"
                    },
                    {
                        style: {
                            font: "normal 24px Calibri",
                            vertAlign: 2
                        },
                        text: "2"
                    },
                    {
                        style: {
                            font: "normal 24px Calibri"
                        },
                        text: ") / R"
                    },
                    {
                        style: {
                            font: "normal 24px Calibri",
                            vertAlign: 1
                        },
                        text: "2"
                    }
                ]
            };

            // Apply rich text in a cell in the viewport
            sheet.setValue(2, 0, SpreadJS, GC.Spread.Sheets.SheetArea.viewport);
            // Apply rich text to the column header cell
            sheet.setValue(0, 4, { richText: [{ style: { font: 'bold 36px Arial ', foreColor: 'blue' }, text: 'Spread' }] }, GC.Spread.Sheets.SheetArea.colHeader);
            sheet.setValue(0, 1, SpreadJS, GC.Spread.Sheets.SheetArea.colHeader);

            // Apply rich text to a cell in the row header
            sheet.setValue(2, 0, sJS, GC.Spread.Sheets.SheetArea.rowHeader);
            sheet.setValue(0, 1, 'Law of universal gravitation:', 3);
            sheet.setValue(1, 1, lawOfUniversalGravitation, 3);
            sheet.setValue(4, 4, { richText: [{ style: { font: 'bold 36px Arial ', foreColor: 'purple', textDecoration: '1' }, text: 'Spread' }] }, GC.Spread.Sheets.SheetArea.viewport);
        }
    </script>
</head>
<body>
    <div id="ss" style="width:100%; height:700px;border: 1px solid gray;"></div>
</body>
</html>

type=warning
注意：在单元格中处理富文本时，应注意以下几点：
SpreadJS 在编辑模式下不支持富文本格式
复选框和超链接单元格类型不能应用富文本格式
富文本的行高将基于行中最大字体大小进行渲染
当富文本垂直方向格式化时，文本装饰无效。同时，在富文本垂直方向显示时使用上标和下标会减小字体大小

创建项目符号列表

SpreadJS 允许在富文本格式中创建无序（项目符号）和有序（编号）列表。

在富文本中，列表项由以下属性表示：

type：表示列表项的列表样式
level：表示列表项的缩进级别（(level + 1) * 4 个空格字符“ ”）
richText：表示列表项的文本内容

type=warning
注意：
可以使用 level 属性模拟嵌套列表。
富文本格式中的列表仅在单元格文本样式的 wordWrap 属性设置为 true 时有效。
使用 GC.Spread.Sheets.ListType 枚举来创建编号和项目符号列表。

以下代码示例创建了包含项目符号和编号的多级列表：

let sheet = spread.getActiveSheet();
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
sheet.setStyle(0, 0, style);
let richText = [{
    type: GC.Spread.Sheets.ListType.disc, // 表示富文本项是列表项，其符号为圆点
    level: 0, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "disc1"
        text: "disc"
    }, {
        text: "1",
        style: {
            font: "24px Arial",
            foreColor: "red"
        }
    }]
}, {
    type: GC.Spread.Sheets.ListType.lowerAlpha, // 表示富文本项是列表项，其符号为小写字母
    level: 1, // 表示列表项的级别
    richText: [{  // 表示当前列表项的文本内容，在本例中表示 "lowerAlpha1"
        text: "lowerAlpha1"
    }]
}, {
    type: GC.Spread.Sheets.ListType.lowerRoman, // 表示富文本项是列表项，其符号为小写罗马数字
    level: 2, // 表示列表项的级别
    richText: [{  // 表示当前列表项的文本内容，在本例中表示 "lowerRoman1"
        text: "lowerRoman1"
    }]
}, {
    type: GC.Spread.Sheets.ListType.lowerRoman, // 表示富文本项是列表项，其符号为小写罗马数字
    level: 2, // 表示列表项的级别
    richText: [{  // 表示当前列表项的文本内容，在本例中表示 "lowerRoman2"
        text: "lowerRoman2"
    }]
}, {
    type: GC.Spread.Sheets.ListType.lowerAlpha, // 表示富文本项是列表项，其符号为小写字母
    level: 1, // 表示列表项的级别
    richText: [{  // 表示当前列表项的文本内容，在本例中表示 "lowerAlpha2"
        text: "lowerAlpha2"
    }]
}, {
    type: GC.Spread.Sheets.ListType.disc, // 表示富文本项是列表项，其符号为圆点
    level: 0, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "disc2"
        text: "disc2"
    }]
}, {
    type: GC.Spread.Sheets.ListType.circle, // 表示富文本项是列表项，其符号为圆圈
    level: 1, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "circle1"
        text: "circle1"
    }]
}, {
    type: GC.Spread.Sheets.ListType.circle, // 表示富文本项是列表项，其符号为圆圈
    level: 1, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "circle2"
        text: "circle2"
    }]
}, {
    type: GC.Spread.Sheets.ListType.square, // 表示富文本项是列表项，其符号为方块
    level: 2, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "square1"
        text: "square1"
    }]
}, {
    type: GC.Spread.Sheets.ListType.square, // 表示富文本项是列表项，其符号为方块
    level: 2, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "square2"
        text: "square2"
    }]
}, {
    type: GC.Spread.Sheets.ListType.disc, // 表示富文本项是列表项，其符号为圆点
    level: 0, // 表示列表项的级别
    richText: [{ // 表示当前列表项的文本内容，在本例中表示 "disc3"
        text: "disc3"
    }]
}];
sheet.setValue(0, 0, {
    richText: richText
});
sheet.setColumnWidth(0, 200);
sheet.setRowHeight(0, 250);

生成的输出如下：

限制

列表项不支持换行。
列表总是左对齐的。
如果将文本对齐设置为居中或右对齐，列表缩进可能不会正确显示。
导出到 Excel 时，列表项将转换为普通富文本，这可能与 SpreadJS 中的显示不同。
列表项不能包含另一个列表。

使用设计器

您还可以通过以下步骤使用 SpreadJS 设计器组件应用富文本格式：

右键单击活动单元格以打开上下文菜单。
选择“富文本...”选项。
富文本对话框出现。
根据需要应用富文本格式。

快捷键

在使用富文本对话框进行富文本格式化时，可以使用以下快捷键：

快捷键	动作
Ctrl/Cmd+Z	撤销
Ctrl/Cmd+Y 或 Ctrl/Cmd+Shift+Z	重做
Ctrl/Cmd+I	斜体
Ctrl/Cmd+B	加粗
Ctrl/Cmd+U	下划线
Ctrl/Cmd+K	删除线
Ctrl/Cmd+↑	上标
Ctrl/Cmd+↓	下标
Ctrl/Cmd+[	减少缩进
Ctrl/Cmd+]	增加缩进