拖放

拖放功能允许您在编辑器内拖放文本和内容块（例如段落、表格或列表）。这使您可以选择整个块或多个块，并在其他块之前或之后移动它们。您还可以从编辑器外部拖放 HTML 和纯文本内容，并使用它来上传图像。

# 演示

下面的演示允许您将联系人从列表中拖放到编辑器中。联系人被插入到编辑器中，作为代表h-card 微格式的自定义小部件。您还可以选择和拖动编辑器内现有的内容。

照片：维基百科.org。

上述代码段的源代码可在以下位置获得：drag-drop.js，drag-drop.html。您可以在此处找到演示中使用的编辑器的配置：build-drag-drop-source.js。处理 h-card 的自定义插件代码可在以下位置获得：hcard.js。

# 通过拖放上传文件

当CKBox 文件管理器 在您的 CKEditor 5 集成中启用时，您可以使用拖放机制上传文件和图像。您可以在CKBox 演示中测试此解决方案。

# 内容块的拖放

默认情况下，拖放插件完全支持在编辑器内拖动内容块（例如段落、表格或列表）。这使您可以选择整个块或多个块，并在其他块之前或之后移动它们。

拖放功能包括

• 选择文本、元素、多个块，并将它们移动到其他位置。
• 将块放置在其他块内，例如表格、块引用等。
• 在 气球块编辑器 中，盲文点面板图标 现在用作拖动句柄。

# 经典编辑器演示

选择一个或多个块，并将它们拖动到文档中的其他位置。您可以在其他块（例如表格和块引用）内放置块。

# 气球块编辑器演示

在气球块编辑器中，您也可以使用拖动句柄拖动内容块。选择或聚焦块，然后使用盲文点面板图标 拖动块。

# 安装

在 安装编辑器 后，将功能添加到插件列表和工具栏配置中

import { ClassicEditor, Clipboard } from 'ckeditor5';

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

DragDrop 插件将与剪贴板插件一起激活。

# 样式化拖放

拖放目标线的颜色由 CSS 变量 (--ck-clipboard-drop-target-color) 管理。您可以使用以下代码段更改线的颜色

:root {
    --ck-clipboard-drop-target-color: green;
}

# 相关功能

• CKEditor 5 支持从文件系统中拖放图像，这得益于 图像上传 功能。

# 贡献

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