插入图像

您可以通过直接从磁盘上传图像来插入图像，但您也可以配置 CKEditor 5 以允许您使用 URL 插入图像。这样，您可以通过添加已在线的图像来节省时间。

# 通过源 URL 插入图像

# 演示

要上传图像，请使用图像工具栏按钮 。如果要通过 URL 添加图像，请单击图像按钮旁边的箭头，然后将 URL 粘贴到下拉面板中。要更新现有图像，请选择它并将新 URL 粘贴到下拉面板中。

# 安装

使用图像的 URL，用户可以将其粘贴到编辑器中。要启用此选项，请安装 ImageInsert 插件并将 insertImage 工具栏项添加到工具栏（它将替换标准的 uploadImage 按钮）。

import { ClassicEditor, Image, ImageInsert } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Image, ImageInsert, /* ... */  ],
        toolbar: [ 'insertImage', /* ... */  ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

这将在工具栏中添加一个新的 插入图像 下拉菜单 。

# 通过将 URL 粘贴到编辑器中来插入图像

# 演示

您可以将图像 URL 直接粘贴到编辑器内容中，它将自动嵌入。

# 安装

AutoImage 插件识别粘贴内容中的图像链接，并在它们被注入文档后不久将其嵌入，以加快编辑速度。接受的图像扩展名是：jpg、jpeg、png、gif 和 ico。使用以下代码在您的编辑器中启用该插件。此功能没有工具栏配置。

import { ClassicEditor, Image, AutoImage } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ /* ... */ , Image, AutoImage ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

如果自动嵌入意外发生，例如链接本来应该作为文本保留在内容中，只需撤消操作即可。单击工具栏中的“撤消”按钮，或使用 Ctrl/Cmd+Z 键。

# 通用 API

Image 插件注册

• 'insertImage' 工具栏下拉菜单组件，它聚合了当前编辑器设置中可用的所有图像插入方法。
• 'insertImageViaUrl' 工具栏按钮，用于打开一个模态对话框，让您通过指定图像 URL 来插入图像。
• 'insertImage' 命令，它接受要插入的图像的源（例如 URL）。

ImageUpload 插件注册

• 'uploadImage' 工具栏按钮，用于打开本机文件浏览器，让您直接从磁盘上传文件（在 图像工具栏 中使用）。
• 'uploadImage' 命令，它接受要上传的文件。

# 贡献

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