diff --git a/Document-Processing/Word/Word-Processor/angular/clipboard.md b/Document-Processing/Word/Word-Processor/angular/clipboard.md index d66df707e..5703d1ad4 100644 --- a/Document-Processing/Word/Word-Processor/angular/clipboard.md +++ b/Document-Processing/Word/Word-Processor/angular/clipboard.md @@ -134,6 +134,42 @@ This paste option appears as follows. ![Image](images/paste.png) +## Events + +DocumentEditor provides the [`beforePaste`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [`cancel`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modify the content to be pasted using [`pasteContent`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [`pasteType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [`BeforePasteEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +```ts +import { Component, OnInit, ViewChild} from '@angular/core'; +import { ToolbarService , DocumentEditorContainerModule, , DocumentEditorContainerComponent, BeforePasteEventArgs +} from '@syncfusion/ej2-angular-documenteditor'; +@Component({ + imports: [ + DocumentEditorContainerModule + ], + standalone: true, + selector: 'app-root', + template: ` `, + providers: [ToolbarService] +}) +export class AppComponent implements OnInit { + @ViewChild('documenteditor_default', { static: true }) + public container!: DocumentEditorContainerComponent; + ngOnInit(): void { } + public handleBeforePaste(args: BeforePasteEventArgs) { + // Block HTML pasteType and Modify the content + if (args.pasteType === "Html") { + args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`; + } + // Cancel paste if content matches 'Software' + if(args.pasteContent == 'Software'){ + args.cancel = true; + } + } +} +``` + ## See Also * [Feature modules](./feature-module) diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md b/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md index 8f99fa7be..41c6d0a27 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md @@ -80,6 +80,21 @@ This paste option appears as follows. ![Image](images/paste.png) +## Events + +DocumentEditor provides the `beforePaste` event, which is triggered before content is pasted into the document. This event gives an opportunity to `cancel` the paste operation, modify the content to be pasted using `pasteContent`, and determining its format with `pasteType`. The event handler receives a `BeforePasteEventArgs` object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/asp-net-core/clipboard-event/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/asp-net-core/clipboard-event/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + ## See Also * [Keyboard shortcuts](../asp-net-core/keyboard-shortcut) diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/clipboard.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/clipboard.md index 98adac054..d55737a26 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/clipboard.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/clipboard.md @@ -1,6 +1,6 @@ --- layout: post -title: Clipboard in ASP.NET MVC Document Editor Component +title: Clipboard in ASP.NET MVC Document Editor Component | Syncfusion description: Learn here all about clipboard in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Clipboard @@ -8,7 +8,7 @@ documentation: ug --- -# Clipboard +# Clipboard in ASP.NET MVC Document editor control Document editor takes advantage of system clipboard and allows to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard. @@ -42,11 +42,13 @@ Document editor exposes API to enable local paste within the control. On enablin {% tabs %} -{% highlight razor tabtitle="CSHTML" %} +{% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/document-editor/asp-net-mvc/clipboard/razor %} {% endhighlight %} -{% highlight c# tabtitle="Clipboard.cs" %} -{% endhighlight %}{% endtabs %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/asp-net-mvc/clipboard/document-editor.cs %} +{% endhighlight %} +{% endtabs %} @@ -81,6 +83,21 @@ This paste option appears as follows. ![Image](images/paste.png) +## Events + +DocumentEditor provides the `beforePaste` event, which is triggered before content is pasted into the document. This event gives an opportunity to `cancel` the paste operation, modify the content to be pasted using `pasteContent`, and determining its format with `pasteType`. The event handler receives a `BeforePasteEventArgs` object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/asp-net-mvc/clipboard-event/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/asp-net-mvc/clipboard-event/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + ## See Also * [Keyboard shortcuts](./keyboard-shortcut) diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/images/paste.png b/Document-Processing/Word/Word-Processor/asp-net-mvc/images/paste.png index a1b5c7687..668d70f6e 100644 Binary files a/Document-Processing/Word/Word-Processor/asp-net-mvc/images/paste.png and b/Document-Processing/Word/Word-Processor/asp-net-mvc/images/paste.png differ diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md b/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md index e4b4fc079..27068e0eb 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md @@ -94,6 +94,32 @@ This paste option appear as follows. ![Image](images/paste.PNG) +## Events + +DocumentEditor provides the [`beforePaste`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [`cancel`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modify the content to be pasted using [`pasteContent`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [`pasteType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [`BeforePasteEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +```ts +var container = new ej.documenteditor.DocumentEditorContainer({ + beforePaste:{ handleBeforePaste }, + enableToolbar: true, + height: '590px', +}); +ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); +container.appendTo('#container'); +function handleBeforePaste (args) { + // Block HTML pasteType and Modify the content + if (args.pasteType === "Html") { + args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`; + } + // Cancel paste if content matches 'Software' + if(args.pasteContent == 'Software'){ + args.cancel = true; + } +} +``` + ## See Also * [Feature modules](./feature-module) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/clipboard.md b/Document-Processing/Word/Word-Processor/javascript-es6/clipboard.md index a38534b50..ab50315fb 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/clipboard.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/clipboard.md @@ -94,6 +94,32 @@ This paste option appear as follows. ![Image](images/paste.PNG) +## Events + +DocumentEditor provides the [`beforePaste`](https://ej2.syncfusion.com/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [`cancel`](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modify the content to be pasted using [`pasteContent`](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [`pasteType`](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [`BeforePasteEventArgs`](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +```ts +import { DocumentEditorContainer, Toolbar, BeforePasteEventArgs } from '@syncfusion/ej2-documenteditor'; +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', beforePaste:handleBeforePaste +}); +DocumentEditorContainer.Inject(Toolbar); +container.serviceUrl = 'hostUrl'; +container.appendTo('#container'); +function handleBeforePaste (args : BeforePasteEventArgs){ + // Block HTML pasteType and Modify the content + if (args.pasteType === "Html") { + args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`; + } + // Cancel paste if content matches 'Software' + if(args.pasteContent == 'Software'){ + args.cancel = true; + } +} +``` + ## See Also * [Feature modules](./feature-module) diff --git a/Document-Processing/Word/Word-Processor/react/clipboard.md b/Document-Processing/Word/Word-Processor/react/clipboard.md index 003162406..83af32654 100644 --- a/Document-Processing/Word/Word-Processor/react/clipboard.md +++ b/Document-Processing/Word/Word-Processor/react/clipboard.md @@ -124,7 +124,52 @@ This paste option appears as follows. ![Image](images/paste.png) +## Events + +DocumentEditor provides the [`beforePaste`](https://ej2.syncfusion.com/react/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [`cancel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modify the content to be pasted using [`pasteContent`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [`pasteType`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [`BeforePasteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +```typescript +import { createRoot } from 'react-dom/client'; +import * as React from 'react'; +import { + DocumentEditorContainerComponent, + Toolbar, +} from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorContainerComponent.Inject(Toolbar); +function App() { + let container = DocumentEditorContainerComponent; + const handleBeforePaste = (args) => { + // Block HTML pasteType and Modify the content + if (args.pasteType === "Html") { + args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`; + } + // Cancel paste if content matches 'Software' + if(args.pasteContent == 'Software'){ + args.cancel = true; + } + }; + return ( +
+ { + container = scope; + }} + height={'590px'} + serviceUrl="hostUrl" + enableToolbar={true} + beforePaste={handleBeforePaste} + /> +
+ ); +} +export default App; +createRoot(document.getElementById('sample')).render(); +``` + ## See Also * [Feature modules](./feature-module) -* [Keyboard shortcuts](./keyboard-shortcut#clipboard) \ No newline at end of file +* [Keyboard shortcuts](./keyboard-shortcut#clipboard) diff --git a/Document-Processing/Word/Word-Processor/vue/clipboard.md b/Document-Processing/Word/Word-Processor/vue/clipboard.md index d01734324..ed2c0b5ed 100644 --- a/Document-Processing/Word/Word-Processor/vue/clipboard.md +++ b/Document-Processing/Word/Word-Processor/vue/clipboard.md @@ -74,6 +74,79 @@ This paste option appears as follows. ![Image](images/paste.png) +## Events + +DocumentEditor provides the [`beforePaste`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [`cancel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modify the content to be pasted using [`pasteContent`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [`pasteType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [`BeforePasteEventArgs`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation. + +The following code snippet illustrates how to achieve this: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% endtabs %} + + ## See Also * [Feature modules](./feature-module) diff --git a/Document-Processing/Word/Word-Processor/vue/images/paste.png b/Document-Processing/Word/Word-Processor/vue/images/paste.png index d9b8d2372..02dfe3abe 100644 Binary files a/Document-Processing/Word/Word-Processor/vue/images/paste.png and b/Document-Processing/Word/Word-Processor/vue/images/paste.png differ diff --git a/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/document-editor.cs new file mode 100644 index 000000000..048a3eb88 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/razor b/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/razor new file mode 100644 index 000000000..e16282d89 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/razor @@ -0,0 +1,21 @@ +@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").beforePaste("handleBeforePaste").Render() + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/tagHelper new file mode 100644 index 000000000..3f1a6d2e0 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/tagHelper @@ -0,0 +1,23 @@ + + + + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/document-editor.cs new file mode 100644 index 000000000..048a3eb88 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/razor new file mode 100644 index 000000000..e16282d89 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/razor @@ -0,0 +1,21 @@ +@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").beforePaste("handleBeforePaste").Render() + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/tagHelper new file mode 100644 index 000000000..3f1a6d2e0 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/tagHelper @@ -0,0 +1,23 @@ + + + +