From 7ed69e86fc06964f188eb09997fe0e33214b54f8 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Thu, 23 Jul 2026 16:21:55 +0530 Subject: [PATCH] 1043289-changed header-footer,history,add-save-button,save-document,auto-save --- .../Word-Processor/angular/header-footer.md | 49 ++++++++++--------- .../Word/Word-Processor/angular/history.md | 25 +++++----- .../how-to/add-save-button-in-toolbar.md | 14 +++--- .../auto-save-document-in-document-editor.md | 38 +++++++------- .../angular/how-to/auto-save-document.md | 34 +++++++------ 5 files changed, 83 insertions(+), 77 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/header-footer.md b/Document-Processing/Word/Word-Processor/angular/header-footer.md index 8056e220d3..084752fbac 100644 --- a/Document-Processing/Word/Word-Processor/angular/header-footer.md +++ b/Document-Processing/Word/Word-Processor/angular/header-footer.md @@ -1,22 +1,22 @@ --- layout: post -title: Header footer in Angular Document editor component | Syncfusion -description: Learn here all about Header footer in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Header and Footer in Angular DOCX Editor component | Syncfusion +description: Learn about headers and footers in the Syncfusion Angular Document Editor component. platform: document-processing -control: Header footer +control: Header and Footer documentation: ug domainurl: ##DomainURL## --- -# Header footer in Angular Document editor component +# Header and Footer in Angular DOCX Editor component -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports headers and footers in its document. Each section in the document can have the following types of headers and footers: +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports headers and footers. Each section in the document can have the following types of headers and footers: * First page: Used only on the first page of the section. -* Even pages: Used on all even numbered pages in the section. -* Default: Used on all pages of the section, where first or even pages are not applicable or not specified. +* Even pages: Used on all even-numbered pages of the section. +* Default: Used on all pages of the section where first or even pages are not applicable or not specified. -You can define this by setting format properties of the corresponding section using the following sample code. +Set the corresponding section-format properties as shown in the following code. ```typescript //Defines whether different header footer is required for first page of the section @@ -25,9 +25,9 @@ this.documentEditor.selection.sectionFormat.differentFirstPage = true; this.documentEditor.selection.sectionFormat.differentOddAndEvenPages = true; ``` -## Go to header footer region +## Go to Header Footer Region -Double click in header or footer region to move the selection into it. You can also do this by using the following code. +Double-click in the header or footer region to move the selection into it. You can also use the following code to achieve the same result. ```typescript this.documentEditor.selection.goToHeader(); @@ -37,13 +37,13 @@ this.documentEditor.selection.goToHeader(); this.documentEditor.selection.goToFooter(); ``` -## Link to previous +## Link to Previous -Link to previous is enabled by default when document has more than one section. If you're using different headers and footers such as different first page or different odd and even pages, they can't be linked together because they're all separate. +Link to Previous is enabled by default when the document has more than one section. Different header/footer types (first page, odd, even) cannot be linked together because they are independent. -Before setting or getting the link to previous value, use the ['goToHeader'](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#gotoheader) or ['goToFooter'](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#gotofooter) API to move the current selection to the header or footer region. +Before setting or getting the Link to Previous value, call [`goToHeader()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#gotoheader) or [`goToFooter()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection#gotofooter) to move the selection into the corresponding region. -You can get or set the default header footer link to previous value of a section at cursor position by using the following sample code. +You can get or set the default header/footer Link to Previous value of the section at the cursor position using the following code. ```typescript this.container.documentEditor.selection.sectionFormat.oddPageHeader.linkToPrevious = false; @@ -56,30 +56,31 @@ In case the document has different header and footer types, such as different fi // Different first page this.container.documentEditor.selection.sectionFormat.firstPageHeader.linkToPrevious = false; this.container.documentEditor.selection.sectionFormat.firstPageFooter.linkToPrevious = false; -//Even page -this.container.documentEditor.selection.sectionFormat.firstPageHeader.linkToPrevious = false; -this.container.documentEditor.selection.sectionFormat.firstPageFooter.linkToPrevious = false; +// Even page +this.container.documentEditor.selection.sectionFormat.evenPageHeader.linkToPrevious = false; +this.container.documentEditor.selection.sectionFormat.evenPageFooter.linkToPrevious = false; ``` ->Note: When there is more than one section in the document, the Link to Previous option becomes available. By default, this feature is disabled state in UI and set to return false for the first section. +N> 1. When there is more than one section in the document, the Link to Previous option becomes available. +N> 2. By default, the Link to Previous option is disabled in the UI and returns `false` for the first section. -## Header and footer distance +## Header and Footer Distance -You can define the distance of header region content from the top of the page. Refer to the following sample code. +You can define the distance of header region content from the top of the page. Use the following code to set the distance of the header region from the top of the page. ```typescript this.documentEditor.selection.sectionFormat.headerDistance = 36; ``` -Same way, you can define the distance of footer region content from the bottom of the page. Refer to the following sample code. +Similarly, you can set the distance of the footer region from the bottom of the page using the following code. ```typescript -this.documentEditor.selection.sectionFormat.footerDistace = 36; +this.documentEditor.selection.sectionFormat.footerDistance = 36; ``` -## Close header footer region +## Close Header Footer Region -Move the selection to the document body from header or footer region by double clicking or tapping the document area. You can also perform this by using the following sample code. +Move the selection from the header or footer region back to the document body by double-clicking the document area, or use the following code. ```typescript this.documentEditor.selection.closeHeaderFooter(); diff --git a/Document-Processing/Word/Word-Processor/angular/history.md b/Document-Processing/Word/Word-Processor/angular/history.md index a30177984d..532081c727 100644 --- a/Document-Processing/Word/Word-Processor/angular/history.md +++ b/Document-Processing/Word/Word-Processor/angular/history.md @@ -1,18 +1,18 @@ --- layout: post -title: History in Angular Document editor component | Syncfusion -description: Learn here all about History in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: History in Angular DOCX Editor component | Syncfusion +description: Learn about the history (undo/redo) feature in the Syncfusion Angular Document Editor component. platform: document-processing control: History documentation: ug domainurl: ##DomainURL## --- -# History in Angular Document editor component +# History in Angular Document Editor component -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) tracks the history of all editing actions done in the document, which allows undo and redo functionality. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) tracks all editing actions performed on the document, enabling undo and redo functionality. -## Enable or disable history +## Enable or Disable History Inject the `EditorHistory` module in your application to provide history preservation functionality for `DocumentEditor`. Refer to the following code example. @@ -35,30 +35,31 @@ export class AppComponent { } ``` -You can enable or disable history preservation for a document editor instance any time using the ‘enableEditorHistory’ property. Refer to the following sample code. +You can enable or disable history preservation at any time using the `enableEditorHistory` property. Use the following code: ```typescript this.documentEditor.enableEditorHistory = false; ``` -## Undo and redo +## Undo and Redo -You can perform undo and redo by `CTRL+Z` and `CTRL+Y` keyboard shortcuts. Document Editor exposes API to do it programmatically. -To undo the last editing operation in document editor, refer to the following sample code. +You can perform undo and redo with the `Ctrl+Z` and `Ctrl+Y` keyboard shortcuts. The Document Editor also exposes APIs to perform undo and redo programmatically. + +To undo the last editing operation in the Document Editor, use the following code: ```typescript this.documentEditor.editorHistory.undo(); ``` -To redo the last undone action, refer to the following code example. +To redo the last undone action, use the following code: ```typescript this.documentEditor.editorHistory.redo(); ``` -## Stack size +## Stack Size -History of editing actions will be maintained in stack, so that the last item will be reverted first. By default, document editor limits the size of undo and redo stacks to 500 each respectively. However, you can customize this limit. Refer to the following sample code. +Editing actions are maintained in a stack, so the most recent action is reverted first. By default, the Document Editor limits both the undo and redo stacks to 500 entries each. You can customize these limits using the following code: ```typescript //Set undo limit. diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/add-save-button-in-toolbar.md b/Document-Processing/Word/Word-Processor/angular/how-to/add-save-button-in-toolbar.md index 906322595d..2d99486cf0 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/add-save-button-in-toolbar.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/add-save-button-in-toolbar.md @@ -1,18 +1,18 @@ --- layout: post -title: Add save button in Angular Document editor component | Syncfusion -description: Learn here to add save button in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Add a Save Button in the Angular DOCX Editor Toolbar | Syncfusion +description: Learn how to add a save button to the Syncfusion Angular Document Editor toolbar. platform: document-processing control: Add save button tool bar documentation: ug domainurl: ##DomainURL## --- -# Add save button in Angular Document editor toolbar +# Add a Save Button in the Angular Document Editor Toolbar -## To add a save button to the existing toolbar in DocumentEditorContainer +## To Add a Save Button to the Existing Toolbar in DocumentEditorContainer -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/angular/documentation/api/toolbar/clickEventArgs/). +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container allows you to add a new button to the existing items in a toolbar. Use [`CustomToolbarItemModel`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/customToolbarItemModel/) to define the custom item, combine it with the existing items in the [`toolbarItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#toolbaritems) property, and define the click action in the [`toolbarClick`](https://ej2.syncfusion.com/angular/documentation/api/toolbar/clickEventArgs/) event. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; @@ -96,7 +96,7 @@ export class AppComponent implements OnInit { onToolbarClick(args: ClickEventArgs): void { switch (args.item.id) { case 'save': - //Disable image toolbar item. + // Save the document (downloads as Docx). this.container?.documentEditor.save('sample', 'Docx'); break; } @@ -104,4 +104,4 @@ export class AppComponent implements OnInit { } ``` ->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`. \ No newline at end of file +N> The default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document-in-document-editor.md b/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document-in-document-editor.md index 525ca8900c..2d6fa82504 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document-in-document-editor.md @@ -1,26 +1,26 @@ --- layout: post -title: Auto save to AWS S3 in Angular Document editor | Syncfusion -description: Learn here all about Auto save document in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Auto Save to AWS S3 in Angular DOCX Editor | Syncfusion +description: Learn how to auto-save documents to AWS S3 from the Syncfusion Angular Document Editor component. platform: document-processing control: Auto save document in document editor documentation: ug domainurl: ##DomainURL## --- -# Auto save document to AWS S3 in Angular Document editor component +# Auto Save Document to AWS S3 in Angular Document Editor component -In this article, we are going to see how to auto save the document in AWS S3. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals. +This article explains how to auto-save the document in AWS S3. You can save the edited content automatically at regular intervals, which reduces the risk of data loss by saving the open document at customized intervals. -The following example illustrates how to auto save the document in AWS S3. +The following example illustrates how to auto-save the document in AWS S3. -* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as DOCX format to server-side using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) method. +* On the client side, use the `contentChange` event to detect edits and save the document at regular intervals. When the `contentChanged` flag is `true`, the document is sent to the server in Document format using the [`saveAsBlob()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) method. ```typescript /** * Add below codes in app.component.html file */ - /** @@ -53,7 +53,7 @@ export class AppComponent { formData.append('data', exportedDocument); /* tslint:disable */ var req = new XMLHttpRequest(); - // Replace your running Url here + // Replace with your running URL here. req.open( 'POST', 'http://localhost:62869/api/documenteditor/SaveToS3', @@ -62,7 +62,7 @@ export class AppComponent { req.onreadystatechange = () => { if (req.readyState === 4) { if (req.status === 200 || req.status === 304) { - console.log('Saved sucessfully'); + console.log('Saved successfully'); } } }; @@ -79,9 +79,11 @@ export class AppComponent { } ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property of the Document Editor is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -* In server-side, configure the access key and secret key in `web.config` file and register profile in `startup.cs`. +* On the server side, configure the access key and secret key in the `web.config` file and register the profile in `startup.cs`. In `web.config`, add key like below format: @@ -99,7 +101,7 @@ In `startup.cs`, register profile in below format: Amazon.Util.ProfileManager.RegisterProfile("sync_development","", ""); ``` -* In server-side, Receives the stream content from client-side and process it to save the document in aws s3. Add Web API in controller file like below to save the document in aws s3. +* On the server side, receive the stream from the client and process it to save the document in AWS S3. Add a Web API method in a controller file to save the document in AWS S3, as shown below. ```c# [AcceptVerbs("Post")] @@ -113,7 +115,7 @@ public string SaveToS3() file.CopyTo(stream); UploadFileStreamToS3(stream, "documenteditor", "", "GettingStarted.docx"); stream.Close(); - return "Sucess"; + return "Success"; } public bool UploadFileStreamToS3(System.IO.Stream localFilePath, string bucketName, string subDirectoryInBucket, string fileNameInS3) @@ -125,15 +127,15 @@ public bool UploadFileStreamToS3(System.IO.Stream localFilePath, string bucketNa if (subDirectoryInBucket == "" || subDirectoryInBucket == null) { -request.BucketName = bucketName; //no subdirectory just bucket name + request.BucketName = bucketName; // No subdirectory; just the bucket name. } else - { // subdirectory and bucket name -request.BucketName = bucketName + @"/" + subDirectoryInBucket; + { // Subdirectory and bucket name. + request.BucketName = bucketName + @"/" + subDirectoryInBucket; } - request.Key = fileNameInS3; //file name up in S3 + request.Key = fileNameInS3; // File name in S3. request.InputStream = localFilePath; - utility.Upload(request); //commensing the transfer + utility.Upload(request); // Commence the transfer. return true; //indicate that the file was sent } diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document.md b/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document.md index b7f7e84330..9c9f204115 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/auto-save-document.md @@ -1,28 +1,28 @@ --- layout: post -title: Auto save to server in Angular Document editor | Syncfusion -description: Learn here all about Auto save document in document editor in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Auto Save to Server in Angular DOCX Editor | Syncfusion +description: Learn how to auto-save documents to a server from the Syncfusion Angular Document Editor component. platform: document-processing control: Auto save document in document editor documentation: ug domainurl: ##DomainURL## --- -# Auto save document to server in Angular Document editor component +# Auto Save Document to Server in Angular Document Editor component -In this article, we are going to see how to auto save the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals. +This article explains how to auto-save the document to a server. You can save the edited content automatically at regular intervals, which reduces the risk of data loss by saving the open document at customized intervals. -The following example illustrates how to auto save the document in server. +The following example illustrates how to auto-save the document to a server. -* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as DOCX format to server-side using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) method. +* On the client side, use the `contentChange` event to detect edits and save the document at regular intervals. When the `contentChanged` flag is `true`, the document is sent to the server in Document format using the [`saveAsBlob()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) method. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { ToolbarService, DocumentEditorContainerComponent, + DocumentEditorContainerModule, } from '@syncfusion/ej2-angular-documenteditor'; -import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'; @Component({ selector: 'app-container', @@ -34,7 +34,7 @@ import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documente serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" - [enableToolbar]=true + [enableToolbar]="true" (created)="onCreate()" (contentChange)="onContentChange()"> @@ -51,17 +51,17 @@ export class AppComponent implements OnInit { setInterval(() => { if (this.contentChanged) { - //You can save the document as below + // Save the document as shown below. this.container?.documentEditor.saveAsBlob('Docx').then((blob: Blob) => { - console.log('Saved sucessfully'); + console.log('Saved successfully'); let exportedDocument: Blob = blob; - //Now, save the document where ever you want. + // Save the document wherever you want. let formData: FormData = new FormData(); formData.append('fileName', 'sample.docx'); formData.append('data', exportedDocument); /* tslint:disable */ var req = new XMLHttpRequest(); - // Replace your running Url here + // Replace with your running URL here. req.open( 'POST', 'http://localhost:62869/api/documenteditor/AutoSave', @@ -87,9 +87,11 @@ export class AppComponent implements OnInit { } ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property of the Document Editor is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -* In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document. +* On the server side, receive the stream from the client and process it to save the document to a server or database. Add a Web API method in a controller file to save the document, as shown below. ```c# [AcceptVerbs("Post")] @@ -103,7 +105,7 @@ public string AutoSave() file.CopyTo(stream); //Save the stream to database or server as per the requirement. stream.Close(); - return "Sucess"; + return "Success"; } ``` @@ -112,4 +114,4 @@ public string AutoSave() Explore how to automatically save Word documents in the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/auto-save). ## See Also -* [AutoSave document in DocumentEditor](..//how-to/auto-save-document-in-document-editor) +* [AutoSave document in DocumentEditor](../how-to/auto-save-document-in-document-editor)