diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/angular/how-to/customize-font-family-drop-down.md index a87d866441..39f965257e 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/customize-font-family-drop-down.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/customize-font-family-drop-down.md @@ -1,16 +1,16 @@ --- layout: post -title: Customize Font Family Dropdown in Angular Document Editor | Syncfusion -description: Learn here all about Customize font family drop down in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Customize font family drop down in Angular Document Editor component | Syncfusion +description: Learn here all about Customize font family drop down in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Customize font family drop down documentation: ug domainurl: ##DomainURL## --- -# Customize font family drop down in Angular Document editor +# Customize font family drop down in Angular Document Editor component -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides an options to customize the font family drop down list values using [`fontFamilies`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontFamilies`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#fontfamilies) in Document editor settings. Fonts added in the fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog. Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#documenteditorsettings) property for DocumentEditor also. @@ -26,15 +26,15 @@ import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; providers: [ToolbarService] }) export class AppComponent implements OnInit { - // Add required font families to list it in font drop down + // Add the required font families to list them in the font drop-down public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria']}; ngOnInit(): void { } } ``` -> 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> 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. -Output will be like below: +The output will be as shown below: ![Font](../images/font-family.png) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/customize-ribbon.md b/Document-Processing/Word/Word-Processor/angular/how-to/customize-ribbon.md index f98f89ff75..7795b72914 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/customize-ribbon.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/customize-ribbon.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize Ribbon in Angular Document editor component | Syncfusion +title: Customize Ribbon in Angular DOCX Editor component | Syncfusion description: Learn how to customize the ribbon in Syncfusion Angular Document Editor - file menu, backstage, tabs, groups, and items. platform: document-processing control: Ribbon Customization @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize Ribbon in Angular Document Document Editor +# Customize Ribbon in Angular Document Editor component -The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides an extensive and flexible API to customize the built-in ribbon UI. You can: +The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides a rich and flexible API to customize the built-in ribbon UI. You can: - Customize the File menu. - Add the Backstage menu instead of File menu. @@ -22,7 +22,7 @@ Below are detailed examples for each ribbon customization scenario. ## File Menu Customization -Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#filemenuitems) property. +Document Editor provides APIs to remove existing built-in File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#filemenuitems) property. In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added. @@ -71,7 +71,7 @@ export class AppComponent { ## Backstage Menu Customization -The Document Editor provides an [`backStageMenu`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden. +The Document Editor provides a [`backStageMenu`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden. The following code example shows how to add the backstage menu items. @@ -104,7 +104,7 @@ export class AppComponent { public backstageMenu = { text: 'File', - backButton: { text: 'close' }, + backButton: { text: 'Close' }, items: [ { id: 'new', text: 'New', iconCss: 'e-icons e-de-ctnr-new' } ] @@ -112,7 +112,7 @@ export class AppComponent { } ``` -Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) +Refer to this documentation to know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) ## Tab Customization @@ -120,9 +120,9 @@ You can customize the ribbon tabs in the Document Editor by showing, hiding, or ### Show/Hide Tab -Document editor provides the [`showTab`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`. +Document editor provides the [`showTab`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using a `RibbonTabType` and `tabId`. -The following code example how to show/hide existing tab using existing tab type and tab id. +The following code example shows how to show/hide an existing tab using the existing tab type and tab id. ```typescript @@ -188,7 +188,7 @@ export class AppComponent implements AfterViewInit { }; this.container.ribbon.addTab(ribbonTab); - // To add the tab before the Insert tab(exising tab) + // To add the tab before the Insert tab (existing tab) this.container.ribbon?.addTab(ribbonTab, 'Insert'); }) @@ -204,7 +204,7 @@ You can also customize ribbon groups within a tab to better organize commands or Document Editor provides an [`showGroup`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showgroup) API to show or hide existing groups within a ribbon tab. -The following code example show how to show/hide the group using group Id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribbongroupinfo). +The following code example shows how to show/hide the group using group Id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribbongroupinfo). ```typescript @@ -281,9 +281,9 @@ You can customize individual items within ribbon groups. This includes showing, ### Show/Hide Item -Using [`showItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`]. +Using the [`showItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#showitems) API in the Document Editor ribbon to show/hide the existing item. Here, you can specify the item Id or [`RibbonItemInfo`]. -The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribboniteminfo). +The following code example shows how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#ribboniteminfo). ```typescript // To hide the Bold and Italic items using ribbon item information @@ -298,7 +298,7 @@ this.container.ribbon.showItems('custom_item', false); ### Enable/Disable Item -Using [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#enableitems) API in Document editor ribbon to enable/disable the existing item. +Using the [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/ribbon#enableitems) API in the Document Editor ribbon to enable/disable the existing item. ```typescript // To disable the underline using ribbon item info @@ -362,4 +362,4 @@ export class AppComponent implements AfterViewInit { ## Online Demo -Explore how to customize and use the ribbon interface in the Angular Document Editor to work with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/ribbon-customization). \ No newline at end of file +Explore how to customize the ribbon 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/ribbon-customization). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/angular/how-to/customize-tool-bar.md index cf3f8d8d73..e6dd6d4a0e 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/customize-tool-bar.md @@ -1,23 +1,24 @@ --- layout: post -title: Customize tool bar in Angular Document editor component | Syncfusion -description: Learn here all about Customize tool bar in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Customize tool bar in Angular DOCX Editor component | Syncfusion +description: Learn here all about Customize tool bar in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Customize tool bar documentation: ug domainurl: ##DomainURL## --- -# Customize tool bar in Angular Document editor component +# Customize tool bar in Angular Document Editor component ## How to customize existing toolbar in DocumentEditorContainer -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. +[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar. -* Add - New items can defined by [`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). +* Add - New items can be defined by [`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). * Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/toolbarItem). -* Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/toolbar#enableitems) + +* Enable, Disable - Toolbar items can be enabled or disabled using [`enableItems`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/toolbar#enableitems) ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; @@ -132,7 +133,7 @@ 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']`. +>N> 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']`. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/angular/how-to/deploy-document-editor-component-for-mobile.md index 1d22a3630c..4b1cf27f3e 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/deploy-document-editor-component-for-mobile.md @@ -1,27 +1,27 @@ --- layout: post -title: Deploy Document Editor for Mobile in Angular | Syncfusion -description: Learn here all about Deploy document editor component for mobile in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Deploy mobile DOCX Editor in Angular | Syncfusion +description: Learn here all about deploying in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Deploy document editor component for mobile +control: Deploy Document Editor component for mobile documentation: ug domainurl: ##DomainURL## --- -# Deploy document editor for mobile in Angular +# Deploy Angular Document Editor component for Mobile -## Document editor component for Mobile +## Document Editor component for mobile -At present, [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component is not responsive for mobile, and we haven't ensured the editing functionalities in mobile browsers. Whereas it works properly as a document viewer in mobile browsers. +At present, [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component is not responsive for mobile, and editing functionalities are not supported in mobile browsers. However, it works properly as a document viewer in mobile browsers. -Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke [`fitPage`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#fitpage) method with [`FitPageWidth`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/pageFitType/) parameter in document change event, such as to display one full page by adjusting the zoom factor. +Hence, it is recommended to switch the Document Editor component to read-only in mobile browsers. Also, invoke the [`fitPage`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#fitpage) method with `FitPageWidth` parameter in the document change event to display one full page by adjusting the zoom factor. -The following example code illustrates how to deploy Document Editor component for Mobile. +The following example code illustrates how to deploy the Document Editor component for mobile. ```typescript //Initialize Document Editor Container component. -import { Component } from '@angular/core'; -import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; +import { Component, ViewChild } from '@angular/core'; +import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor'; @Component({ selector: 'app-container', // specifies the template string for the DocumentEditorContainer component @@ -51,8 +51,8 @@ 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> 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. You can download the complete working example from this [GitHub location](https://github.com/SyncfusionExamples/Deploy-Document-Editor-in-Mobile-Friendly-Web-page/) ->Note: You can use the [`restrictEditing`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#restrictediting) in DocumentEditorContainer and [`isReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#isreadonly) in DocumentEditor based on your requirement to change component to read only mode. \ No newline at end of file +N> You can use the [`restrictEditing`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#restrictediting) in DocumentEditorContainer and [`isReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#isreadonly) in DocumentEditor based on your requirement to change the component to read-only mode. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/disable-auto-focus.md b/Document-Processing/Word/Word-Processor/angular/how-to/disable-auto-focus.md index e435ce0952..e3ae2e33c0 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/disable-auto-focus.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/disable-auto-focus.md @@ -1,28 +1,31 @@ --- layout: post -title: Disable auto focus in Angular Document editor component | Syncfusion -description: Learn here all about How to disable and enable auto focus in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: How to disable auto focus in Angular DOCX Editor | Syncfusion +description: Learn here all about How to disable and enable auto focus in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing -control: How to disable auto focus in document editor +control: How to disable auto focus in Document Editor documentation: ug domainurl: ##DomainURL## --- -# How to disable auto focus in Syncfusion Angular Document Editor +# How to disable auto focus in Angular Document Editor component -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) gets focused automatically when the page loads. If you want the Document editor not to be focused automatically it can be customized. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) gets focused automatically when the page loads. If you do not want the Document Editor to be focused automatically, you can customize this behavior. -The following example illustrates to disable the auto focus in DocumentEditorContainer. +The following example illustrates how to disable the auto focus in DocumentEditorContainer. ```typescript ``` ->Note: Default value of [`enableAutoFocus`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#enableautofocus) property is `true`. -The following example illustrates to disable the auto focus in DocumentEditor. +N> The default value of [`enableAutoFocus`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#enableautofocus) property is `true`. + +## Disable auto focus in DocumentEditor + +The following example illustrates how to disable the auto focus in DocumentEditor. ```typescript ``` ->Note: Default value of [`enableAutoFocus`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#enableautofocus) property is `true`. \ No newline at end of file +N> The default value of [`enableAutoFocus`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#enableautofocus) property is `true`. \ No newline at end of file