支持的内容格式功能

以下列出了当前“从 Word 导入”转换器支持的所有内容格式功能。

# 内联格式

对内联格式的支持包括对内联样式（来自 UI 工具栏按钮）、样式和默认文档属性的转换。

内联格式生成的是原生 HTML 标签（例如，<strong> 用于粗体文本）或带有适当 CSS 样式声明的 <span> 标签。对相同内容应用多个内联样式将产生嵌套的 HTML，例如

<p>
    <span style="font-size: 21.33px; font-family: Georgia, serif">
        <i>
            <u>Hello, World!</u>
        </i>
    </span>
</p>

所有内联内容都放置在段落（<p>）元素内。

# 基本样式

提供对基本内联样式的支持，包括粗体、斜体、下划线和删除线。

基本样式被转换为语义 HTML 标签，使内容更易访问，更利于搜索引擎优化。

功能名称	标记
粗体	`<strong>`
斜体	`<i>`
下划线	`<u>`
删除线	`<s>`

# 自定义下划线样式

“从 Word 导入”转换器能够保留自定义下划线样式，包括线型、颜色和粗细。

# 已知限制

目前，支持的 CSS 无法提供 Word 中所有现有线型的等效项。一些样式不得不进行调整，以提供最佳的兼容性。

# 字体样式

提供对不同字体样式的支持，包括字体系列、字号、字体颜色、背景颜色等。

功能名称	标记
字号	`<span style="font-size: 16px">`
字体系列	`<span style="font-family: 'Comic Sans MS'">`
字体颜色	`<span style="color: #ff0000">`
字体背景	`<span style="background-color: #00ffff">`
下标	`<sub>`
上标	`<sup>`
小写字母	`<span style="font-variant-caps: small-caps">`
大写字母	`<span style="text-transform: uppercase">`
字母间距	`<span style="letter-spacing: 1px">`
字体拉伸	`<span style="font-stretch: 125%">`

# 链接

提供对链接的支持。

功能名称	标记
链接	`<a href="https://cksource.com">`

链接可以像其他任何内联内容一样进行完整样式设置。

<p>
    <a href="https://cksource.com">
        <span style="color: #f12ec5; font-size: 26.67px;">
            <strong>
                <u>Colorful link!</u>
            </strong>
        </span>
    </a>
</p>

# 文字语言

文字的语言以 RFC 5652 值的形式输出在特定文本的 lang 属性中。

为了确保 CKEditor 5 文本部分语言正确识别转换器返回的语言，请确保编辑器中配置的语言标签格式与转换器返回的语言标签格式完全一致。

# 隐藏文字

隐藏文字支持，只需不输出任何 HTML 标记即可。

# 图片

“从 Word 导入”可以识别文档中的嵌入式图片和来自外部来源的图片。

图片被转换为带有适当 src 属性的 <img> 标签。

功能名称	标记
图片	`<img src="https://cksource.com/image.png">`

包含外部链接的图片被转换为内联图片，并用锚点 (<a>) 标签包裹。

此外，转换器还支持以下 Word 功能

功能名称	标记
替代文字	`<img alt="替代文字" src="..." />`
图片高度	`<img style="height: 100px" height="100" src="..." />`
图片宽度	`<img style="width: 100px" width="100" src="..." />`

# 图片定位

转换器支持图片的基本定位

与页面顶部和左侧边缘或页边距的距离被转换为相应的 CSS 边距，并且这些图片还获得了 float: left CSS 属性。
水平对齐的图片被转换为具有适当 float CSS 属性值的图片，或者对于居中的图片，被转换为通过 margin-left: auto 和 margin-right: auto CSS 属性居中的图片。

此外，将图片置于文字之前或之后的设置通过对图片应用适当的 z-index CSS 属性值来实现。为了完全支持图片置于文字之后，容器（例如，CKEditor 5 编辑器）必须具有透明背景。对于 CKEditor 5，可以通过以下 CSS 代码实现

.ck-editor__editable {
    background-color: transparent;
}

# 旋转

图片旋转，包括二维和三维旋转，都得到了支持，同时还支持 Word 的内置相机预设。当使用相机预设时，只有定义了旋转角度的预设才会被输出。

功能名称	标记
图片旋转	`<img style="transform: rotateZ(90deg)" src="..." />`

# 已知限制

定位和文字环绕设置仅在基本级别上得到支持。
如果图片置于文字之前或之后，则水平对齐不起作用。
如果图片也垂直定位，则水平居中不起作用。
标题当前被转换为普通段落。
图片透视不支持。

# 内联格式的已知限制

由于制表符在 Word 文档中的表示方式很复杂，它们始终被转换为 4 个空格。

# 块级格式

块级 Word 功能被转换为适当的块级 HTML 元素，以表示相同的语义含义和视觉外观。某些元素（如图片）可以是内联元素或块级元素，具体取决于它们在文档中的位置。

与内联格式类似，块级格式可以直接应用于 Word 内容，并且（取决于功能）可以定义为内联样式或单独的样式，或者可以是默认文档属性的一部分。

# 段落

文档中的任何文本，无论其样式如何，都放置在段落元素内。段落被转换为 <p> 标签，并且可以嵌套在表格单元格和列表项内。

<p>
    Representative paragraph.
</p>

Word 中的段落还可以使用以下功能进行样式设置

功能名称	标记
文字对齐	`<p style="text-align: right">`
缩进	`<p style="margin-left: 48px">`
首行缩进	`<p style="text-indent: 190px">`
悬挂缩进	`<p style="margin-left: 190px; text-indent: -190px">`
行高	`<p style="line-height: 1.5">`
段落间距	`<p style="margin-top: 20px; margin-bottom: 10px">`
段落边框	`<p style="border-top: 1px solid #000000">`
背景颜色	`<p style="background-color: #ffc000">`

# 已知限制

“至少”行高类型与“精确”行高类型处理方式相同。
即使明确禁用，相同样式的段落之间的间距始终保留。

# 标题

Word 文档中的标题由具有特殊格式属性的段落表示，称为“大纲级别”。它可以通过使用样式（如内置的“标题 1”样式）或段落格式来应用。

此属性决定将段落转换为哪个标题。转换器仅支持从 <h1> 到 <h6> 的标题。如果导入了一些超出此范围的标题，它们将被压缩到最近的相应级别（即，大于 1 的级别将被转换为 <h1>，而小于 6 的级别将被渲染为 <h6>）。否则，它们将像段落一样起作用。

可以应用于段落的样式也可以应用于标题。

<h1>Heading 1</h1>
<h2 style="color: #ffc000">Colored heading 2</h2>

# 列表

“从 Word 导入”支持 Word 中可用的有序列表和无序列表，将它们转换为适当的 HTML 元素。列表项文本内容始终用 <p> 元素包裹。

下面展示了无序列表最基本的列表结构

<ul style="list-style-type: disc">
  <li><p>List item 1</p></li>
  <li>
    <p>List item 2</p>
    <ul style="list-style-type: circle">
      <li><p>List item 3</p></li>
    </ul>
  </li>
</ul>

有序列表的基本结构

<ol style="list-style-type: decimal">
  <li><p>List item 1</p></li>
  <li>
    <p>List item 2</p>
    <ol style="list-style-type: lower-latin">
      <li><p>List item 3</p></li>
    </ol>
  </li>
</ol>

转换器支持包含多级列表，但可以跳过中间的级别。此类列表通过缩进列表项来创建。例如，我们可以有一个列表，在第一级之后跳过第二级，直接进入第三级。转换器支持此功能，结果如下

<ol style="list-style-type: decimal">
  <li>
    <p>Level 1</p>
    <ul style="list-style-type: none">
      <li>
        <ol style="list-style-type: lower-roman">
          <li><p>Level 3</p></li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

有序列表可以使用与 1 不同的数字开始，方法是利用可用的 start HTML 属性，该属性与 Word 文档中的正确列表级别匹配

<ol start="4" style="list-style-type: decimal">
  <li><p>Item 4</p></li>
  <li><p>Item 5</p></li>
  <li><p>Item 6</p></li>
</ol>

由于 Word 允许用户在无序列表中设置任何字符作为标记，因此转换器将首先尝试识别标记字符并尽可能将其匹配到支持的字符。如果无法识别使用的标记，它将回退到 disc 列表样式类型。

默认支持的无序列表样式为：disc、circle、square 和 none。
默认支持的有序列表样式为：decimal、lower-latin、lower-roman 和 decimal-leading-zero。
其他编号类型，如希伯来语或泰语，也受支持。但是，其中一些没有 CSS 对应物，它们将被转换为 CSS 中可用的其他编号。这种编号的一个例子是使用俄语字母的编号，它被转换为 lower-latin。

# 已知限制

由于内置 DOCX 和 CSS 编号定义之间的差异，某些编号类型可能存在差异。这些差异的程度取决于具体的编号，因此对于某些列表，第一个使用不同编号的列表项可能是第 1000 个，而对于其他列表，编号可能在第 30 个项目左右开始不同。
不支持自定义列表标记。这适用于某些内置列表样式，以及通常无法用内置 CSS 列表样式类型表示的标记。
由于 DOCX 对无序列表的表示方式，标记检测取决于用于列表标记的字体，并且不能泛化。这意味着始终存在产生无效标记的可能性。
目前不支持列表项的缩进。

# 表格

表格表示为包含 <table> 元素的 <figure> 元素，以保持与 CKEditor 5 相同的内容语义。

每个 figure 元素都包含一个 table 类，为集成者提供了一种简单的方法来对所有表格应用自定义样式，例如将它们重新定位到文档中。

转换器将输出的简单表格示例（为清晰起见，跳过样式）

<figure class="table">
  <table>
    <tbody>
      <tr>
        <td>
          <p>Cell 1</p>
        </td>
        <td>
          <p>Cell 2</p>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

表格支持 Word 中提供的大多数功能，包括

功能名称	标记
表格/单元格宽度	`<td style="width: 100px;">`
表格/单元格高度	`<td style="height: 20px;">`
单元格合并	`<td colspan="2">`
单元格填充	`<td style="padding-top: 20px">`
单元格间距	`<table style="border-spacing: 10px">`
单元格的垂直对齐方式	`<td style="vertical-align: top">`
表格背景色	`<table style="background-color: #f4b083;">`
单元格背景色	`<td style="background-color: #f4b083;">`
表格边框样式	`<table style="border-top: 1px solid #f4b083;">`
单元格边框样式	`<td style="border-top: 1px solid #f4b083;">`
表格标题	`<th scope="col">`
表格对齐方式/浮动	`<figure style="margin-left: auto; margin-right: 0">`

转换器正确支持表格嵌套，可以在彼此内部嵌套多个表格。表格标题被转换为普通段落，以保持与 Word 中的标题相同的表示方式。

# 已知限制

不支持条件表格格式化。
标题当前被转换为普通段落。
某些边框样式可能无法在浏览器中正确解析，因为 HTML 和 Word 之间边框冲突的解析方式不同。

# 分页符

Word 中的分页符可以通过两种方式添加：使用工具栏中的“分页符”按钮，或应用特殊的“在段落之前分页符”段落格式化，在段落之前添加分页符。

从 Word 导入都支持这两种方法，并生成以下 HTML

<div class="page-break" style="page-break-after: always">
  <span style="display: none">&nbsp;</span>
</div>

# 已知限制

不支持通过段落格式化应用的分页符在表格内。

# 水平线

与 HTML 类似，Word 中的水平线旨在指导文本流或分隔文档的不同部分。从 Word 导入正确识别并转换水平线为语义上正确的 <hr> 元素。

<p>Paragraph 1</p>
<hr />
<p>Paragraph 2</p>

# 已知限制

目前不支持水平线样式。

# 复杂对象

Word 包含更复杂的对象，如目录、文本框、引用字段等。从 Word 导入尝试支持所有这些对象，但由于 HTML 和 CSS 本身的限制，其中一些对象可能无法正确转换。

# 已知限制

保留了目录的内容，但它不支持内容书签。
表单对象：仅保留文本和样式。