安装

在 安装编辑器 之后，将您需要的 子功能 添加到您的插件列表和编辑器工具栏中

import {
    ClassicEditor,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    LinkImage
} from 'ckeditor5';

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

# 配置工具栏下拉菜单

图像功能附带统一的图像插入下拉菜单组件 。它会自动收集已安装的图像插入方法。例如，如果您安装了 ImageUpload 插件，相应的按钮会自动出现在下拉菜单中。您只需要在工具栏中添加一个按钮

import { ClassicEditor, Image } from 'ckeditor5';

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

该功能预先配置为包括以下图像插入方法

• upload - 从计算机上传图像。它使用配置的图像上传适配器。
• assetManager - 打开已安装的资产管理器（例如 CKBox）。
• url - 允许通过直接指定其 URL 插入图像。ImageInsertViaUrl 功能提供的集成。

请注意，只有在您安装了专用功能时，才会添加上述插入方法。但是，并非所有功能都是必需的。如果只有一个功能可用，则工具栏下拉菜单图标会将其指示出来。

如果您需要限制下拉菜单中包含的方法（除了不安装特定功能之外）或更改其顺序，可以使用 image.insert.integration 配置选项

import { ClassicEditor, Image } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Image ],
        toolbar: [ 'insertImage', /* ... */ ],
        image: {
            insert: {
                // This is the default configuration, you do not need to provide
                // this configuration key if the list content and order reflects your needs.
                integrations: [ 'upload', 'assetManager', 'url' ]
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置上下文图像工具栏

您还需要配置所需的上下文图像工具栏项目。请注意使用 分隔符 来组织工具栏。

import {
    ClassicEditor,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    LinkImage
} from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage ],
        toolbar: [ 'insertImage', /* ... */ ],
        image: {
            toolbar: [
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative',
                '|',
                'linkImage'
            ],
            insert: {
                // If this setting is omitted, the editor defaults to 'block'.
                // See explanation below.
                type: 'auto'
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 内联和块图像

内联图像可以像普通文本一样插入到段落或链接的中间。另一方面，块图像只能插入到其他块之间，例如段落、表格或媒体。块图像尺寸更大，并且作为独立内容存在，因此也可以具有单独的标题。除此之外，两种类型的图像都可以调整大小、链接等。

默认情况下，Image 插件同时支持内联和块图像，作为 ImageInline 和 ImageBlock 插件的粘合剂。

加载的插件	可用的功能
	块图像（带有标题）	内联图像
Image（默认）	✅  是	✅  是
ImageBlock	✅  是	❌  否
ImageInline	❌  否	✅  是

默认情况下，如果未指定 image.insert.type 配置，则插入到内容中的所有图像都将被视为块图像。这意味着将图像插入段落（或其他内容块）中会立即在当前段落或块下方或上方为图像创建一个新块。插入后，可以使用 上下文工具栏 将块图像转换为内联图像。

如果您希望修改此行为，可以使用编辑器配置中的 type 设置

ClassicEditor
    .create( element, {
        image: {
            insert: {
                type: 'auto'
            }
        }
    } );

type 设置接受以下三个值

• 'auto'：编辑器根据光标的位置确定图像类型。例如，如果您在段落的中间插入图像，它将被插入为内联图像。如果您在段落的末尾或开头插入它，它将成为块图像。
• 'block'：始终将图像插入为块元素，将其放置在当前段落或块的下方或上方。
• 'inline'：始终将图像插入为当前段落或块中的内联元素。

如果从配置中省略了 type 设置，则行为默认为将图像插入为块。

重要：如果只启用了其中一种类型的图像插件（例如，启用了 ImageInline 但没有启用 ImageBlock），则 image.insert.type 配置将被有效地忽略，并将使用支持的图像类型。

# 贡献

该功能的源代码在 GitHub 上的 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image 上。