Contribute to this guide

指南图像文本替代

图像文本替代(alt 属性)帮助屏幕阅读器用户浏览和理解文档。它还为搜索引擎抓取工具提供有意义的图像描述。

# 演示

下面的编辑器启用了基本图像功能。单击任何图像并使用上下文图像工具栏 替代文本 来编辑文本替代。

欢迎来到冰岛!

Location of the most picturesque waterfalls of Iceland

冰岛的狂野、不受约束的自然一定会成为您的观光清单的首选。但是您应该从哪里开始呢?由于这个神奇的岛屿将火焰和冰融为一体,为什么不选择这种结合的产物——水——作为您的起点呢?

山区地形为冰岛的河流提供了无数障碍。在冰岛溪流、小溪和河流的激流遇到巨石或岩石的锋利边缘时,它们会以风景如画的瀑布倾泻而下。

我们选择了一些特别壮丽的瀑布。明智地计划您的环岛旅行,这样您就不会错过任何这些自然奇观!


Kirkjufellsfoss waterfall
1. 奇尔奇菲尔瀑布
Seljalandsfoss waterfall
2. 塞里雅兰瀑布
Skogafoss waterfall
3. 斯科加瀑布

Svartifoss waterfall
4. 斯瓦蒂瀑布
Godafoss waterfall
5. 格奥达瀑布
Godafoss waterfall
5. 格奥达瀑布

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

# 其他功能信息

alt 属性对于辅助功能和 SEO 都是必不可少的。

CKEditor 5 使用 ImageTextAlternative 插件提供对替代图像文本的支持。alt 属性受编辑器输出数据中的块和内联图像支持

<!-- Block image markup -->
<figure class="image">
    <img src="..." alt="Description of an image">
    <figcaption>...</figcaption>
</figure>

<!-- Inline image in a paragraph -->
<p>Some text followed by an image <img src="..." alt="Description of an image">.</p>

此功能遵循 编辑器建议 项目提出的标记。

# 利用 CKBox 管理文本替代

使用 CKBox 文件管理器 时,您可以利用其 元数据管理工具 来设置或更改文本替代。CKBox 会自动将元数据 description 添加到 alt 标签。

# 安装

⚠️ 新的导入路径

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

查看 图像功能安装指南 以了解如何启用此功能。

# 通用 API

ImageTextAlternative 插件注册

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

# 贡献

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