|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: Clipboard in Blazor DocumentEditor Component | Syncfusion |
4 | | -description: Checkout and learn here all about Clipboard in Syncfusion Blazor DocumentEditor component and much more. |
| 4 | +description: Learn how to perform cut, copy, and paste clipboard operations in the Syncfusion Blazor Document Editor component, both programmatically and through the UI. |
5 | 5 | platform: document-processing |
6 | 6 | control: DocumentEditor |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # Clipboard in Blazor DocumentEditor Component |
11 | 11 |
|
12 | | -[Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) provides built-in support for clipboard operations such as cut, copy, and paste. You can perform the clipboard operations using keyboard shortcuts, touch, and keyboard interactions. Also, the same functionalities can be invoked programmatically. |
| 12 | +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (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. |
13 | 13 |
|
14 | | -There is a built-in clipboard (local clipboard) with this Word processor component, which allows the users to perform cut, copy, and paste faster. If you want to use system clipboard instead of local clipboard, turn off the local clipboard by setting the [`EnableLocalPaste`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_EnableLocalPaste) to false. |
| 14 | +## Local vs. System Clipboard |
15 | 15 |
|
16 | | -If you need to copy or paste the contents from other applications, use system clipboard. To copy or paste the contents within the Word processor component, use local clipboard. |
| 16 | +The Document Editor supports two clipboard modes to handle content transfer: |
| 17 | + |
| 18 | +To copy or paste contents from other applications, the system clipboard should be used. To copy or paste the contents within the Word processor component, use local clipboard. |
17 | 19 |
|
18 | 20 | Let’s see how to invoke each clipboard operations using code. |
19 | 21 |
|
20 | | -## Copy |
| 22 | +* **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. |
| 23 | +* **System Clipboard**: This is the operating system's standard clipboard, which allows for transferring content between the Document Editor and other applications. |
| 24 | + |
| 25 | +To use the system clipboard, set the [`EnableLocalPaste`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_EnableLocalPaste) property to `false`. When this property is false, all clipboard operations will use the system clipboard. |
21 | 26 |
|
22 | | -You can copy the selected contents using the [`CopyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyAsync) method as shown in the following code example. |
| 27 | +## Programmatic Clipboard Operations |
| 28 | + |
| 29 | +You can programmatically invoke clipboard operations using the editor's API methods. The following example demonstrates how to call the [`CutAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_CutAsync), [`CopyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyAsync), and [`PasteAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_PasteAsync_System_String_System_Nullable_Syncfusion_Blazor_DocumentEditor_PasteOptions__) methods. |
23 | 30 |
|
24 | 31 | ```cshtml |
25 | 32 | @using Syncfusion.Blazor.DocumentEditor |
26 | 33 |
|
27 | 34 | <button @onclick="CopyClick">Copy</button> |
28 | | -<SfDocumentEditorContainer @ref="container" EnableToolbar=true></SfDocumentEditorContainer> |
| 35 | +<button @onclick="CutClick">Cut</button> |
| 36 | +<button @onclick="PasteClick">Paste</button> |
| 37 | +<SfDocumentEditorContainer @ref="container" EnableToolbar=true> |
| 38 | +</SfDocumentEditorContainer> |
29 | 39 |
|
30 | 40 | @code { |
31 | 41 | SfDocumentEditorContainer container; |
32 | | - protected async void CopyClick(object args) |
| 42 | + protected async void CopyClick() |
33 | 43 | { |
| 44 | + // Copies the selected content to the clipboard. |
34 | 45 | await container.DocumentEditor.Selection.CopyAsync(); |
35 | 46 | } |
36 | | -} |
37 | | -``` |
38 | | - |
39 | | -## Cut |
40 | | - |
41 | | -You can cut the selected content using the ['Cut'](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_CutAsync) method as shown in the following code example. |
42 | | - |
43 | | -```cshtml |
44 | | -@using Syncfusion.Blazor.DocumentEditor |
45 | | -
|
46 | | -<button @onclick="CutClick">Cut</button> |
47 | | -<SfDocumentEditorContainer @ref="container" EnableToolbar=true></SfDocumentEditorContainer> |
48 | | -
|
49 | | -@code { |
50 | | - SfDocumentEditorContainer container; |
51 | | - protected async void CutClick(object args) |
| 47 | + protected async void CutClick() |
52 | 48 | { |
| 49 | + // Cuts the selected content and moves it to the clipboard. |
53 | 50 | await container.DocumentEditor.Editor.CutAsync(); |
54 | 51 | } |
| 52 | + protected async void PasteClick() |
| 53 | + { |
| 54 | + // Pastes content from the clipboard to the current cursor position. |
| 55 | + // This will use the local or system clipboard based on the EnableLocalPaste property. |
| 56 | + await container.DocumentEditor.Editor.PasteAsync(); |
| 57 | + } |
55 | 58 | } |
56 | | -
|
57 | 59 | ``` |
| 60 | +### Copy |
58 | 61 |
|
59 | | -## Paste |
60 | | - |
61 | | -## Local paste |
| 62 | +The [`CopyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SelectionModule.html#Syncfusion_Blazor_DocumentEditor_SelectionModule_CopyAsync) method copies the currently selected content in the editor to the clipboard. |
62 | 63 |
|
63 | | -The following code example shows how to perform the paste operation from the local clipboard. |
| 64 | +### Cut |
64 | 65 |
|
65 | | -```cshtml |
66 | | -@using Syncfusion.Blazor.DocumentEditor |
| 66 | +The [`CutAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_CutAsync) method removes the currently selected content from the editor and moves it to the clipboard. |
67 | 67 |
|
68 | | -<button @onclick="PasteClick">Paste</button> |
69 | | -<SfDocumentEditorContainer @ref="container" EnableToolbar=true EnableLocalPaste=true></SfDocumentEditorContainer> |
70 | | -@code { |
71 | | - SfDocumentEditorContainer container; |
72 | | - protected async void PasteClick(object args) |
73 | | - { |
74 | | - await container.DocumentEditor.Editor.PasteAsync(); |
75 | | - } |
76 | | -} |
| 68 | +### Paste |
77 | 69 |
|
78 | | -``` |
| 70 | +The [`PasteAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_PasteAsync) method inserts the content from the clipboard at the current cursor position. Its behavior depends on the `EnableLocalPaste` property: |
| 71 | +* If `true` (default), it pastes from the editor's local clipboard. |
| 72 | +* If `false`, it pastes from the system clipboard. |
79 | 73 |
|
80 | | -You can also explore our [Blazor Word Processor](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) example to know how to render and configure the document editor. |
| 74 | +Explore the [Blazor Word Processor example](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) to see how to render and configure the Document Editor. |
0 commit comments