clipboard.md

layout	post
title	Clipboard in Blazor DOCX Editor Component | Syncfusion
description	Learn how to perform cut, copy, and paste clipboard operations in the Syncfusion Blazor Document Editor component, both programmatically and through the UI.
platform	document-processing
control	Document Editor
documentation	ug

Clipboard in Blazor Document Editor Component

The Blazor Document Editor (Document Editor) provides built-in support for clipboard operations, including cut, copy, and paste. These actions can be performed through the toolbar, context menus, standard keyboard shortcuts, or programmatically via the component's APIs.

Local vs. System Clipboard

The Document Editor supports two clipboard modes to handle content transfer:

To copy or paste content from other applications, use the system clipboard. To copy or paste content within the Document Editor component, use the local clipboard.

Let’s see how to invoke each clipboard operation using code.

• Local Clipboard (Default): This is a built-in clipboard that is optimized for performance when cutting, copying, and pasting content within the editor itself. It is enabled by default.
• System Clipboard: This is the operating system's standard clipboard, which allows for transferring content between the Document Editor and other applications.

To use the system clipboard, set the EnableLocalPaste property to false. When this property is false, all clipboard operations will use the system clipboard.

Programmatic Clipboard Operations

You can programmatically invoke clipboard operations using the editor's API methods. The following example demonstrates how to call the CutAsync, CopyAsync, and PasteAsync methods.

@using Syncfusion.Blazor.DocumentEditor

<button @onclick="CopyClick">Copy</button>
<button @onclick="CutClick">Cut</button>
<button @onclick="PasteClick">Paste</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar="true">
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    protected async void CopyClick()
    {
        // Copies the selected content to the clipboard.
        await container.DocumentEditor.Selection.CopyAsync();
    }
    protected async void CutClick()
    {
        // Cuts the selected content and moves it to the clipboard.
        await container.DocumentEditor.Editor.CutAsync();
    }
    protected async void PasteClick()
    {
        // Pastes content from the clipboard to the current cursor position.
        // This will use the local or system clipboard based on the EnableLocalPaste property.
        await container.DocumentEditor.Editor.PasteAsync();
    }
}

Copy

The CopyAsync method copies the currently selected content in the editor to the clipboard.

Cut

The CutAsync method removes the currently selected content from the editor and moves it to the clipboard.

Paste

The PasteAsync method inserts the content from the clipboard at the current cursor position. Its behavior depends on the EnableLocalPaste property:

• If true (default), it pastes from the editor's local clipboard.
• If false, it pastes from the system clipboard.

N> When you paste content from an external source into the Document Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer to the unsupported features documentation to learn more about unsupported elements.

Explore the Blazor Document Editor example to see how to render and configure the Document Editor.