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

指南链接图像

该 LinkImage 插件允许您将图像用作链接。

# 演示

单击其中一个图像以打开上下文工具栏。使用链接图标 链接 为图像添加链接。完成此操作后，图像右上角将出现一个图标，指示图像已附加链接。

Some alt

参观我们的餐厅，免费享用无麸质菜肴！

或者在线订购，只支付运费！

 

 

Some alt

春季金枪鱼

这款美味的金枪鱼牛排外皮焦香，内部鲜嫩多汁。配以红甘蓝和甜菜沙拉以及清蒸蔬菜，营养均衡，健康美味，美味无比！

 

Some alt

秋季土豆

土豆是饥饿人士的完美食物！整只烤土豆，配以炒蔬菜和无麸质烧烤酱，是那些渴望乡村怀旧风味的人们的完美选择！

 

 

关注我们的社交媒体

Some alt    Some alt    Some alt

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

# 其他功能信息

以下是一些链接图像可以派上用场的用例

  • 链接到图像的高分辨率版本。
  • 使用图像作为缩略图链接到文章或产品页面。
  • 创建链接到其他页面的横幅。

可以通过图像工具栏添加或编辑图像链接。图像右上角的图标表示存在链接。

块图像的示例源代码类似于以下代码

<figure class="image">
    <a href="...">
        <img src="..." alt="...">
    </a>
    <figcaption>Image caption</figcaption>
</figure>

内联图像代码看起来更像这样

<a href="...">
    Some text <img src="..." alt="..." style="width: 20px">
</a>

# 安装

要启用此功能，您需要加载 LinkImage 插件。在 安装指南 中了解更多信息。

该 LinkImage 插件在 @ckeditor/ckeditor5-link 包中可用。

# 通用 API

该 LinkImage 插件注册

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

# 贡献

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