diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/angular/how-to/customize-context-menu.md index d9a4f553b8..e3cc68e0f0 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/customize-context-menu.md @@ -1,22 +1,22 @@ --- layout: post -title: Customize Context Menu in Angular Document Editor | Syncfusion -description: Learn here all about Customize context menu in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Customize Context Menu in Angular DOCX Editor component | Syncfusion +description: Learn how to customize the context menu in the Syncfusion Angular Document Editor component by adding custom menu items and handling selection events. platform: document-processing -control: Customize context menu +control: Customize context menu documentation: ug domainurl: ##DomainURL## --- -# Customize context menu in Angular Document editor component +# Customize Context Menu in Angular Document Editor component -## How to customize context menu in Document Editor +## How to Customize Context Menu in the Document Editor -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/contextMenu#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/customContentMenuEventArgs) +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) allows you to add custom options to the context menu. Use the [`addCustomMenu()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/contextMenu#addcustommenu) method to add a custom option, and handle the selection with the [`customContextMenuSelect`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/customContentMenuEventArgs) event. ### Add Custom Option -The following code shows how to add custom option in context menu. +The following code shows how to add a custom option to the context menu. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; @@ -24,9 +24,8 @@ import { ToolbarService, DocumentEditorContainerComponent, } from '@syncfusion/ej2-angular-documenteditor'; -import { ClickEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations'; +import { MenuItemModel } from '@syncfusion/ej2-navigations'; import { - CustomToolbarItemModel, DocumentEditorContainerModule, } from '@syncfusion/ej2-angular-documenteditor'; @@ -85,17 +84,19 @@ 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 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. -### Customize custom option in context menu +### Customize Custom Option in Context Menu -Document Editor allows you to customize the added custom option and also to hide/show default context menu. +The Document Editor allows you to customize an added custom option and also to hide or show default context menu items. -#### Hide default context menu items +#### Hide Default Context Menu Items -Using [`addCustomMenu()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/contextmenu#addcustommenu) method, you can hide the default context menu. By setting second parameter as true. +Using the [`addCustomMenu()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/contextmenu#addcustommenu) method, you can replace the default context menu by setting the second parameter to `true`. -The following code shows how to hide default context menu and add custom option in context menu. +The following code shows how to replace the default context menu and add a custom option in the context menu. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; @@ -103,9 +104,8 @@ import { ToolbarService, DocumentEditorContainerComponent, } from '@syncfusion/ej2-angular-documenteditor'; -import { ClickEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations'; +import { MenuItemModel } from '@syncfusion/ej2-navigations'; import { - CustomToolbarItemModel, DocumentEditorContainerModule, } from '@syncfusion/ej2-angular-documenteditor'; @@ -144,11 +144,13 @@ 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 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. -#### Customize added context menu items +#### Customize Added Context Menu Items -The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs). +The following code shows how to show or hide an added custom option in the context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs) event. ```typescript @Component({ @@ -200,9 +202,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 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. -The following is the output of custom context menu with customization. +The following is the output of the custom context menu with customization. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -216,13 +220,15 @@ The following is the output of custom context menu with customization. {% previewsample "/document-processing/samples/document-editor/angular/customize-context-menu-cs1" %} -> 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 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. -#### Customize Context Menu with sub-menu items +#### Customize Context Menu with Sub-Menu Items -Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/contextMenu#addcustommenu) method. +The Document Editor allows you to customize the context menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/contextMenu#addcustommenu) method. -The following code shows how to add a sub items in the custom option in context menu in Document Editor Container. +The following code shows how to add sub-items inside a custom context menu option in the Document Editor container. ```typescript import { NgModule } from '@angular/core'; @@ -284,8 +290,10 @@ 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 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. -### Online Demo +## Online Demo Explore how to customize the context menu in the Angular Document Editor for working with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/custom-context-menu). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/supported-fileformats.md b/Document-Processing/Word/Word-Processor/angular/supported-fileformats.md index f1703cb226..16bf8ad8d9 100644 --- a/Document-Processing/Word/Word-Processor/angular/supported-fileformats.md +++ b/Document-Processing/Word/Word-Processor/angular/supported-fileformats.md @@ -1,16 +1,16 @@ --- layout: post title: Supported File Formats in Angular DOCX Editor | Syncfusion -description: Learn more about the supported file formats in Syncfusion® Angular DOCX Editor (Document Editor) for opening and exporting documents. +description: Learn more about the supported file formats in Syncfusion® Angular Document Editor (Document Editor) for opening and exporting documents. control: Supported File Formats platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Supported File Formats in Angular DOCX Editor +# Supported File Formats in Angular Document Editor -Syncfusion® Angular DOCX Editor (Document Editor) supports a wide range of Microsoft Word and other document formats for opening and exporting, with both client-side and server-side capabilities. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats. Some operations are handled client-side, while others require server-side processing. ## Supported File Formats @@ -34,10 +34,10 @@ N> * Requires server-side interactions for the operations. ## Supported platforms for server-side dependencies -You can deploy web APIs for the server-side dependencies of the Document Editor component on the following platforms. +You can deploy Web Services for the server-side dependencies of the Document Editor component on the following platforms. -- [ASP.NET Core](./web-services/core) -- [ASP.NET MVC](./web-services/mvc) -- [Java](./web-services/java) +- [ASP.NET Core](./web-services/core) +- [ASP.NET MVC](./web-services/mvc) +- [Java](./web-services/java) -To know more about server-side dependencies, refer to this [page](./web-services-overview). \ No newline at end of file +For more information about server-side dependencies, refer to this [page](./web-services-overview). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/track-changes.md b/Document-Processing/Word/Word-Processor/angular/track-changes.md index dc20fd5e11..23708d6e3b 100644 --- a/Document-Processing/Word/Word-Processor/angular/track-changes.md +++ b/Document-Processing/Word/Word-Processor/angular/track-changes.md @@ -1,26 +1,31 @@ --- layout: post -title: Track changes in Angular Document editor component | Syncfusion -description: Learn here all about Track changes in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Track changes in Angular DOCX Editor component | Syncfusion +description: Learn how to enable Track Changes in Angular Document Editor and manage document revisions by accepting or rejecting edits made by multiple reviewers. platform: document-processing -control: Track changes +control: Track changes documentation: ug domainurl: ##DomainURL## --- -# Track changes in Angular Document editor component +# Track Changes in Angular Document Editor -Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If track changes option is enabled, all editing operations are preserved as revisions in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor). +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports Track Changes functionality, which allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject these modifications. It is a useful tool for managing changes made by several reviewers to the same document. When the Track Changes option is enabled, all editing operations are preserved as revisions. -## Enable track changes in Document Editor +## Enable Track changes + +Track changes can be enabled using the [enableTrackChanges](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#enabletrackchanges) property. When enabled, all editing operations are recorded and preserved as revisions in the Document Editor. The following example demonstrates how to enable track changes. -``` - +```typescript + ``` ->Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set [enableTrackChanges] = true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes during the document change event. The following example demonstrates how to enable Track changes for the all the Document while Opening. +N> 1. Track changes are document-level settings. When opening a document, if the document does not have track changes enabled, then `enableTrackChanges` will be disabled even if you set `enableTrackChanges: true` in the initial rendering. +N> 2. If you want to enable track changes for all documents, we recommend enabling track changes in the `documentChange` event. + +The following example demonstrates how to enable track changes for all the documents while opening. ```typescript @@ -34,7 +39,7 @@ onDocumentChange(): void { ## Get all tracked revisions -The following example demonstrate how to get all tracked revision from current document. +The following example demonstrates how to get all tracked revisions from the current document. ```typescript /** @@ -43,9 +48,9 @@ The following example demonstrate how to get all tracked revision from current d let revisions : RevisionCollection = this.documentEditor.revisions; ``` -## Accept or Reject all changes programmatically +## Accept or reject all changes -The following example demonstrates how to accept/reject all changes. +The following example demonstrates how to accept or reject all changes. ```typescript /** @@ -66,7 +71,7 @@ revisions.rejectAll(); ## Accept or reject a specific revision -The following example demonstrates how to accept/reject specific revision in the Document Editor. +The following example demonstrates how to accept or reject a specific revision in the Document Editor. ```typescript /** @@ -85,7 +90,7 @@ revisions.get(1).reject(); ## Navigate between the tracked changes -The following example demonstrates how to navigate tracked revision programmatically. +The following example demonstrates how to navigate through tracked revisions programmatically. ```typescript /** @@ -99,17 +104,17 @@ this.documentEditor.selection.navigateNextRevision(); this.documentEditor.selection.navigatePreviousRevision(); ``` -## Filtering changes based on user +## Filter Changes by User -In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user. +The built-in review panel in the Document Editor supports filtering changes based on the user. ![Track changes](images/tracked-changes.png) ## Custom metadata along with author -The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. +The Document Editor allows customizing revisions using [revisionSettings](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [customData](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#customdata) property allows attaching additional metadata to tracked revisions. This metadata can represent roles, tags, or any custom identifier for a revision. To display this metadata along with the author name in the Track Changes pane, the [showCustomDataWithAuthor](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property must be enabled. -The following example code illustrates how to enable and update custom metadata for track changes revisions. +The following example illustrates how to enable and update custom metadata for track changes revisions. ```ts import { Component, OnInit, ViewChild } from '@angular/core'; @@ -147,17 +152,16 @@ The Track Changes pane will display the author name along with the custom metada ![Custom metadata along with author](images/track-changes-customData.png) ->Note: -* When you export the document as SFDT, the customData value is stored in the revision collection. When you reopen the SFDT, the custom data is automatically restored and displayed in the Track Changes pane. -* Other than SFDT export (e.g. DOCX and other), the customData is not preserved, as it is specific to the Document Editor component. +N> 1. When the document is exported as SFDT, the `customData` value is stored in the revision collection. Upon reopening the SFDT, the custom data is automatically restored and displayed in the Track Changes pane. +N> 2. In formats other than SFDT (such as DOCX and others), the `customData` is not preserved, as it is specific to the Document Editor component. ## Protect the document in track changes only mode Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, all the users are allowed to view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes. -Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#stopprotection) API. +The Document Editor provides an option to protect and unprotect the document using the [enforceProtection](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#stopprotection) APIs. -The following example code illustrates how to enforce and stop protection in Document editor container. +The following example illustrates how to enforce and stop protection in the Document Editor container. ```typescript import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; @@ -188,17 +192,21 @@ 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 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. Tracked changes only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane) ![Enable track changes only protection](images/tracked-changes.png) ->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly |RevisionsOnly`. In stop protection method, parameter denotes the password. +N> In the `enforceProtection` method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of the protection type are `NoProtection | ReadOnly | FormFieldsOnly | CommentsOnly | RevisionsOnly`. In the `stopProtection` method, the parameter denotes the password. + +## Restrict accept or reject by author -## Event +Restrict accepting or rejecting changes by author name. -You can restrict the accept and reject changes based on the author name. The following example demonstrates how to restrict an author from accept/reject changes. +The following example demonstrates how to restrict an author from accepting or rejecting changes. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; diff --git a/Document-Processing/Word/Word-Processor/angular/troubleshooting/document-loading-issue-with-404-error.md b/Document-Processing/Word/Word-Processor/angular/troubleshooting/document-loading-issue-with-404-error.md index f0867b2168..ce88d31b44 100644 --- a/Document-Processing/Word/Word-Processor/angular/troubleshooting/document-loading-issue-with-404-error.md +++ b/Document-Processing/Word/Word-Processor/angular/troubleshooting/document-loading-issue-with-404-error.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Document loading issue with 404 error in Angular DOCX Editor -If document loading fails and you see a 404 error in the browser console, the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) is unable to reach a valid Web Service endpoint. +If document loading fails and you see a 404 error in the browser console, the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) is unable to reach a valid Web Service endpoint. ## Reasons The 404 error may occur due to the following reasons: -- **The Web Service is not running or inactive** – When hosting your own Web API, the server may be stopped or not deployed correctly, causing required endpoints such as `/Import` or `/SpellCheck` to return 404. -- **The configured `serviceUrl` is invalid** – Issues like a missing trailing slash (`/`), wrong port number, incorrect API route, or typos will cause the editor to call incorrect endpoints. -- **The application is using an old or discontinued Document Editor service URL** – When using an old Document Editor service URL which no longer valid. +- **The Web Service is not running or inactive** – When hosting your own Web Service, the server may be stopped, not deployed correctly, or configured such that required endpoints (e.g., `/Import`, `/SpellCheck`) return 404. +- **The configured `serviceUrl` is invalid** – A missing trailing slash (`/`), wrong port, incorrect API route, or typos cause the editor to call invalid endpoints. +- **The application is using an old or discontinued Document Editor service URL** – When using an old Document Editor service URL that is no longer valid. ## Solutions @@ -28,6 +28,8 @@ The 404 error may occur due to the following reasons: container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; ``` -> Note: The hosted Web API link is provided for demonstration and evaluation only. 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 hosted Web Service link is provided for demonstration and evaluation only. +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. -- If you are using your own hosted Web API, ensure that the Web Service is running, active, and the configured service URL is valid. \ No newline at end of file +- If you are using your own hosted Web Service, ensure that the Web Service is running, active, and the configured service URL is valid. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/ui-builder-skill.md b/Document-Processing/Word/Word-Processor/angular/ui-builder-skill.md index 41b7c745b9..97adc10e52 100644 --- a/Document-Processing/Word/Word-Processor/angular/ui-builder-skill.md +++ b/Document-Processing/Word/Word-Processor/angular/ui-builder-skill.md @@ -1,63 +1,63 @@ --- layout: post title: Angular UI Builder Skill with DOCX Editor | Syncfusion® -description: Install Syncfusion® Angular UI Builder to generate production-ready Angular components with DOCX Editor from natural-language prompts. -control: DOCX Editor +description: Install Syncfusion® Angular UI Builder to generate production-ready Angular components with Document Editor from natural-language prompts. +control: Document Editor platform: document-processing documentation: ug -keywords: Angular UI Builder, Skills, AI Assistants, DOCX Editor, Agent Skills +keywords: Angular UI Builder, Skills, AI Assistants, Document Editor, Agent Skills --- -# Angular UI Builder Skill with DOCX Editor for AI Assistants +# Angular UI Builder Skill with Document Editor for AI Assistants -**Syncfusion® Angular UI Builder Skill** is an AI-powered agent skill that accelerates [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) development by transforming natural-language UI requirements into production-ready code using Syncfusion® Angular components. +**Syncfusion® Angular UI Builder Skill** is an AI-powered agent skill that accelerates Angular Document Editor development by transforming natural-language UI requirements into production-ready code using Syncfusion® Angular components. -Integrated with your AI-powered IDE, it leverages deep knowledge of **Angular DOCX Editor** and other Angular components to deliver accurate and ready-to-use code. +Integrated with your AI-powered IDE, it leverages deep knowledge of **[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor)** (Document Editor) and other Angular components to deliver accurate and ready-to-use code. By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, Angular UI Builder helps you rapidly build scalable Document editing applications and user interfaces without leaving your development workflow. ## Prerequisites -Before installing Angular UI Builder Skill with DOCX Editor, ensure the following: +Before installing Angular UI Builder Skill with Document Editor, ensure the following: - Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended) -- Required [Node.js](https://nodejs.org/en) version ≥ 18 +- [Node.js](https://nodejs.org/en) version ≥ 18 (required) - Angular application (existing or new); see [Quick Start](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli) - A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) -- Active Syncfusion® license(any of the following): +- Active Syncfusion® license (any of the following): - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense) - [Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) ## Key Benefits -**AI-Driven UI Generation** +### **AI-Driven UI Generation** - Transforms prompts into fully developed Angular components rather than just partial code snippets. - Automatically selects appropriate Syncfusion® components and features - Produces structured, maintainable code -**Component Usage & API Accuracy** +### **Component Usage & API Accuracy** - Uses correct Syncfusion® component APIs - Injects required feature modules (paging, sorting, filtering, etc.) - Avoids unsupported or deprecated patterns -**Patterns & Best Practices** +### **Patterns & Best Practices** - Recommended component composition and state management - Event handling aligned with Angular standards - Secure and scalable coding patterns -**Accessibility & Responsiveness** +### **Accessibility & Responsiveness** - WCAG 2.1 AA–aligned output - Semantic HTML with ARIA support -**Design-System Integration** +### **Design-System Integration** - Supports Tailwind, Bootstrap, Material, or custom themes - Ensures consistent Syncfusion® styling and theme usage ## Installation -Before installing Angular UI Builder Skill with DOCX Editor, ensure that APM (Agent Package Manager) is installed and available in your environment. +Before installing Angular UI Builder Skill with Document Editor, ensure that APM (Agent Package Manager) is installed and available in your environment. -**Verify APM Installation** +### Verify APM Installation Run the following command to confirm APM is installed: @@ -65,9 +65,9 @@ Run the following command to confirm APM is installed: apm --version ``` -### Install the Syncfusion® Angular UI Builder Skill with DOCX Editor package using APM +### Install the Syncfusion® Angular UI Builder Skill with Document Editor package using APM -Use the APM CLI to install the Angular UI Builder skill with DOCX Editor for your preferred environment: +Use the APM CLI to install the Angular UI Builder Skill with Document Editor for your preferred environment: {% tabs %} {% highlight bash tabtitle="Copilot" %} @@ -99,20 +99,20 @@ After installation, the following artifacts are added to your project for the Gi Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. -> For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the Angular UI Builder. +N> For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the Angular UI Builder. -## How the Syncfusion® Angular UI Builder Skill Works with DOCX Editor +## How the Syncfusion® Angular UI Builder Skill Works with Document Editor 1. **Intent Analysis:** Parse the user's prompt to identify component types and high-level layout intent. -2. **Project Detection:** Automatically detects project framework, package manager, existing themes, and DOCX Editor configuration. -3. **Component Mapping:** Map intent to Angular DOCX Editor and Angular components, including required modules. +2. **Project Detection:** Automatically detects project framework, package manager, existing themes, and Document Editor configuration. +3. **Component Mapping:** Map intent to Syncfusion® Document Editor and Angular components, including required modules. 4. **Theming & Design System** Load required theming guidelines and confirm key design choices: - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option, which can be used as is or changed based on preference. - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2) - Light and Dark Mode - Core design basics (colors, spacing, typography, responsiveness, accessibility) -5. **Code Generation:** Produce TypeScript Angular components with DOCX Editor integration, props interfaces, and CSS/styling scaffolding. +5. **Code Generation:** Produce TypeScript Angular components with Document Editor integration, props interfaces, and CSS/styling scaffolding. 6. **Dependency Management:** Recommend or install required Syncfusion® packages and peer dependencies. 7. **Validation:** Run accessibility and basic security checks, request confirmation for changes. 8. **Code Insertion:** Create files or patch existing files following project structure and conventions. @@ -124,39 +124,39 @@ Key enforcement points: - Generates semantic HTML with ARIA attributes and keyboard support - Avoids unsupported or deprecated API usages for Syncfusion® components -> The assistant handles most stages automatically and may request confirmation where required. +N> The assistant handles most stages automatically and may request confirmation where required. ## Using the AI Assistant -After installing Angular UI Builder Skill with DOCX Editor and APM, the relevant agent and skill files are added to your project under: +After installing Angular UI Builder Skill with Document Editor and APM, the relevant agent and skill files are added to your project under: - `.agent/skills/` (skill files) - `.github/agents/` (Angular UI builder agent configuration, based on the selected target) To start using the skill: -1.Open your supported IDE. -2.In the chat panel, select the `syncfusion-angular-ui-builder` agent from the **Agent dropdown**. +1. Open your supported IDE. +2. In the chat panel, select the `syncfusion-angular-ui-builder` agent from the **Agent dropdown**. ![Set Agent](images/UI-Builder-Agent.png) -3.Start prompting the agent with a clear description of your UI requirements. +3. Start prompting the agent with a clear description of your UI requirements. -> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. +N> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. -**Examples Prompts:** +**Example Prompts:** {% promptcards %} {% promptcard Dynamic Toolbar Customization Editor %} -Build a new angular application with DOCX Editor Include a sidebar panel on the right side that displays a list of toolbar options with checkboxes for New, Open, Undo and Redo. Add a button at the bottom of the panel labeled "Apply Changes". When users select or deselect the checkboxes and click the button, the toolbar at the top of the DOCX Editor should dynamically show or hide the corresponding items in real time, providing a customizable editing experience similar to advanced document editors. +Build a new Angular application with Document Editor - Include a sidebar panel on the right side that displays a list of toolbar options with checkboxes for New, Open, Undo and Redo. Add a button at the bottom of the panel labeled **"Apply Changes"**. When users select or deselect the checkboxes and click the button, the toolbar at the top of the Document Editor should dynamically show or hide the corresponding items in real time, providing a customizable editing experience similar to advanced document editors. {% endpromptcard %} {% promptcard Track Changes Toggle Editor %} -Build a new angular application with the DOCX Editor. Include a toggle switch button at the top-left corner to control track changes. The editor should support real-time change tracking, and the toggle must properly enable or disable this feature. +Build a new Angular application with the Syncfusion Document Editor. Include a toggle switch button at the top-left corner to control track changes. The editor should support real-time change tracking, and the toggle must properly enable or disable this feature. {% endpromptcard %} @@ -166,7 +166,7 @@ Generated code follows best practices with accessible, semantic HTML, strong Typ ## Best Practices -Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result: +Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results: - **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your project. - **Use advanced AI models:** For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations.