diff --git a/ej2-angular/document-editor/comments.md b/ej2-angular/document-editor/comments.md index d289a83b78..94f61327f3 100644 --- a/ej2-angular/document-editor/comments.md +++ b/ej2-angular/document-editor/comments.md @@ -171,6 +171,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Comment only protection can be enabled in UI by using [Restrict Editing pane](../document-editor/document-management#restrict-editing-pane) ![Enable comment only protection](images/commentsonly.png) @@ -203,3 +205,49 @@ export class AppComponent implements OnInit { } } ``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + +## Events + +DocumentEditor provides [beforeCommentAction](../api/document-editor/#beforecommentaction) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](../api/document-editor/commentActionEventArgs) object as an argument, which allows access to information about the comment. + +To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete: + +```typescript +import { Component, OnInit, ViewChild} from '@angular/core'; +import { ToolbarService , DocumentEditorSettingsModel, DocumentEditorContainerModule, CommentActionEventArgs, DocumentEditorContainerComponent, beforeCommentActionEvent } from '@syncfusion/ej2-angular-documenteditor'; +@Component({ + imports: [ + DocumentEditorContainerModule + ], + standalone: true, + selector: 'app-root', + // specifies the template string for the DocumentEditorContainer component + template: ` `, + providers: [ToolbarService] +}) +export class AppComponent implements OnInit { + @ViewChild('documenteditor_default', { static: true }) + public container!: DocumentEditorContainerComponent; + public mentionData: any = [ + { "Name": "Mary Kate", "EmailId": "marry@company.com" }, + { "Name": "Andrew James", "EmailId": "james@company.com" }, + { "Name": "Andrew Fuller", "EmailId": "andrew@company.com" } + ]; + public settings: DocumentEditorSettingsModel = { mentionSettings: { dataSource: this.mentionData, fields: { text: 'Name' } } }; + ngOnInit(): void { + this.container.currentUser="Guest User"; + } + // Event get triggerd on comment actions like Post, edit, reply, resolve and reopen + public beforeComment(args: CommentActionEventArgs) { + // Check the type and author of the comment and current user are different + if (args.type === "Delete" && this.container.currentUser !== args.author) { + // Cancel the comment action + args.cancel = true; + } + } +} +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. diff --git a/ej2-angular/document-editor/document-management.md b/ej2-angular/document-editor/document-management.md index 96b2074835..42a7486fc6 100644 --- a/ej2-angular/document-editor/document-management.md +++ b/ej2-angular/document-editor/document-management.md @@ -64,6 +64,8 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p {% previewsample "page.domainurl/samples/document-editor/document-editor-container-cs1" %} +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## See Also * [How to protect the document in form filling mode](../document-editor/form-fields#protect-the-document-in-form-filling-mode) diff --git a/ej2-angular/document-editor/form-fields.md b/ej2-angular/document-editor/form-fields.md index 74b4cf5c39..8d2ae80104 100644 --- a/ej2-angular/document-editor/form-fields.md +++ b/ej2-angular/document-editor/form-fields.md @@ -156,4 +156,6 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >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`. In stop protection method, parameter denotes the password. \ No newline at end of file diff --git a/ej2-angular/document-editor/getting-started.md b/ej2-angular/document-editor/getting-started.md index 9dd89ba124..82700fc452 100644 --- a/ej2-angular/document-editor/getting-started.md +++ b/ej2-angular/document-editor/getting-started.md @@ -151,6 +151,8 @@ export class AppComponent implements OnInit { ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + #### Run the DocumentEditorContainer application The quickstart project is configured to compile and run the application in a browser. Use the following command to run the application. @@ -173,7 +175,9 @@ DocumentEditorContainer output will be displayed as follows. {% previewsample "page.domainurl/samples/document-editor/document-editor-container-cs2" %} ->Note: If you see a license banner when running your application, it means that you need to obtain a license key and register it within the application in order to use Syncfusion® components. You can find more information on how to obtain and register a license key on our [Licensing overview](../licensing/overview/) page. +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + +>Note: If you see a license banner when running your application, it means that you need to obtain a license key and register it within the application in order to use Syncfusion components. You can find more information on how to obtain and register a license key on our [Licensing overview](../licensing/overview/) page. ### DocumentEditor Component @@ -205,6 +209,8 @@ export class AppComponent implements OnInit { ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + #### Run the DocumentEditor application The quickstart project is configured to compile and run the application in a browser. Use the following command to run the application. @@ -227,7 +233,8 @@ Output will be displayed as follows. {% previewsample "page.domainurl/samples/document-editor/getting-started-cs1" %} ->Note: If you see a license banner when running your application, it means that you need to obtain a license key and register it within the application in order to use Syncfusion® components. You can find more information on how to obtain and register a license key on our [Licensing overview](../licensing/overview/) page. +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Frequently Asked Questions diff --git a/ej2-angular/document-editor/how-to/auto-save-document-in-document-editor.md b/ej2-angular/document-editor/how-to/auto-save-document-in-document-editor.md index 592c1fe9ef..081f57c087 100644 --- a/ej2-angular/document-editor/how-to/auto-save-document-in-document-editor.md +++ b/ej2-angular/document-editor/how-to/auto-save-document-in-document-editor.md @@ -79,6 +79,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + * In server-side, configure the access key and secret key in `web.config` file and register profile in `startup.cs`. In `web.config`, add key like below format: diff --git a/ej2-angular/document-editor/how-to/auto-save-document.md b/ej2-angular/document-editor/how-to/auto-save-document.md index 27d75c7a9f..665913d30c 100644 --- a/ej2-angular/document-editor/how-to/auto-save-document.md +++ b/ej2-angular/document-editor/how-to/auto-save-document.md @@ -87,6 +87,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + * 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. ```c# diff --git a/ej2-angular/document-editor/how-to/change-document-view.md b/ej2-angular/document-editor/how-to/change-document-view.md index 121d19c12f..2c6cc2e7ed 100644 --- a/ej2-angular/document-editor/how-to/change-document-view.md +++ b/ej2-angular/document-editor/how-to/change-document-view.md @@ -52,6 +52,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#layouttype) in DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/). ## How to change the document view in DocumentEditorContainer component @@ -80,4 +82,6 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#layouttype) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/). \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/change-the-default-search-highlight-color.md b/ej2-angular/document-editor/how-to/change-the-default-search-highlight-color.md index 6c3072b322..c93368c527 100644 --- a/ej2-angular/document-editor/how-to/change-the-default-search-highlight-color.md +++ b/ej2-angular/document-editor/how-to/change-the-default-search-highlight-color.md @@ -46,6 +46,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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: ![How to change the default search highlight color](../images/search-color.png) \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/customize-color-picker.md b/ej2-angular/document-editor/how-to/customize-color-picker.md index 9df5ed988b..e812d8b756 100644 --- a/ej2-angular/document-editor/how-to/customize-color-picker.md +++ b/ej2-angular/document-editor/how-to/customize-color-picker.md @@ -52,6 +52,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + | Property | Behaviour | |---|---| | columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 | @@ -60,3 +62,5 @@ export class AppComponent implements OnInit { | modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true | | showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true | + +>**Note**: According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options. diff --git a/ej2-angular/document-editor/how-to/customize-context-menu.md b/ej2-angular/document-editor/how-to/customize-context-menu.md index 07017c0e3c..15c401a687 100644 --- a/ej2-angular/document-editor/how-to/customize-context-menu.md +++ b/ej2-angular/document-editor/how-to/customize-context-menu.md @@ -85,6 +85,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ### Customize custom option in context menu Document Editor allows you to customize the added custom option and also to hide/show default context menu. @@ -142,6 +144,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + #### 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/). @@ -196,6 +200,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + The following is the output of custom context menu with customization. {% tabs %} @@ -209,3 +215,73 @@ The following is the output of custom context menu with customization. {% endtabs %} {% previewsample "page.domainurl/samples/document-editor/customize-context-menu-cs1" %} + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + +#### 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()`](../../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. + +```typescript +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'; + +import { Component, OnInit, ViewChild } from '@angular/core'; +import { + ToolbarService, + DocumentEditorContainerComponent, + CustomContentMenuEventArgs, +} from '@syncfusion/ej2-angular-documenteditor'; +import { MenuItemModel } from '@syncfusion/ej2-navigations'; +@Component({ + imports: [DocumentEditorContainerModule], + + standalone: true, + selector: 'app-container', + // specifies the template string for the DocumentEditorContainer component + template: ` `, + providers: [ToolbarService], +}) +export class AppComponent implements OnInit { + @ViewChild('documenteditor_default') + public container?: DocumentEditorContainerComponent; + ngOnInit(): void {} + onCreate() { + debugger; + // creating Custom Options + let menuItems = [ + { + text: 'Form field', + id: 'form field', + iconCss: 'e-de-formfield e-icons', + items: [ + { + text: 'Text form', + id: 'Text form', + iconCss: 'e-icons e-de-textform', + }, + { + text: 'Check box', + id: 'Check box', + iconCss: 'e-icons e-de-checkbox-form', + }, + { + text: 'Drop down', + id: 'Drop down', + iconCss: 'e-icons e-de-dropdownform', + }, + ], + }, + ]; + + ( + this.container as DocumentEditorContainerComponent + ).documentEditor.contextMenu.addCustomMenu(menuItems, false, true); + } +} +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. diff --git a/ej2-angular/document-editor/how-to/customize-font-family-drop-down.md b/ej2-angular/document-editor/how-to/customize-font-family-drop-down.md index 71b7f3947c..1f0a2f5ecc 100644 --- a/ej2-angular/document-editor/how-to/customize-font-family-drop-down.md +++ b/ej2-angular/document-editor/how-to/customize-font-family-drop-down.md @@ -33,6 +33,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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: ![Font](../images/font-family.png) \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/deploy-document-editor-component-for-mobile.md b/ej2-angular/document-editor/how-to/deploy-document-editor-component-for-mobile.md index a58f6c4cc6..be01a4e732 100644 --- a/ej2-angular/document-editor/how-to/deploy-document-editor-component-for-mobile.md +++ b/ej2-angular/document-editor/how-to/deploy-document-editor-component-for-mobile.md @@ -51,6 +51,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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 diff --git a/ej2-angular/document-editor/how-to/disable-drag-and-drop.md b/ej2-angular/document-editor/how-to/disable-drag-and-drop.md index f3c87a33ea..9992069f8e 100644 --- a/ej2-angular/document-editor/how-to/disable-drag-and-drop.md +++ b/ej2-angular/document-editor/how-to/disable-drag-and-drop.md @@ -36,4 +36,6 @@ export class AppComponent{ } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >Note: Default value of [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettings/#allowDragAndDrop) property is `true`. \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md b/ej2-angular/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md index d9c45725e2..23551d3804 100644 --- a/ej2-angular/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md +++ b/ej2-angular/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md @@ -72,6 +72,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Otherwise, you can disable clicking inside Header or Footer by using [`closeHeaderFooter`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#closeheaderfooter) API in selection module. The following example code illustrates how to close header and footer when selection is inside header or footer in `DocumentEditorContainer` instance. @@ -122,6 +124,7 @@ export class AppComponent implements OnInit { } } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. ## Disable header and footer edit in DocumentEditor instance @@ -190,3 +193,5 @@ export class AppComponent { }; } ``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. diff --git a/ej2-angular/document-editor/how-to/disable-optimized-text-measuring.md b/ej2-angular/document-editor/how-to/disable-optimized-text-measuring.md index 89a0c232b3..cb4fe6501d 100644 --- a/ej2-angular/document-editor/how-to/disable-optimized-text-measuring.md +++ b/ej2-angular/document-editor/how-to/disable-optimized-text-measuring.md @@ -52,6 +52,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Disable optimized text measuring in `DocumentEditor` instance The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditor` instance. @@ -70,4 +72,6 @@ export class AppComponent { public settings = { enableOptimizedTextMeasuring: false }; } -``` \ No newline at end of file +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/export-document-as-pdf.md b/ej2-angular/document-editor/how-to/export-document-as-pdf.md index edf37cb9ad..b557af50e5 100644 --- a/ej2-angular/document-editor/how-to/export-document-as-pdf.md +++ b/ej2-angular/document-editor/how-to/export-document-as-pdf.md @@ -111,7 +111,9 @@ export class AppComponent implements OnInit { } ``` -## Export document as pdf in server-side using Syncfusion® DocIO +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + +## Export document as pdf in server-side using Syncfusion DocIO With the help of [Syncfusion® DocIO](https://help.syncfusion.com/file-formats/docio/word-to-pdf), you can export the document as PDF in server-side. Here, you can search the text. @@ -160,6 +162,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + * Using Save API in server-side, you can convert the sfdt to stream. * Finally, convert the stream to PDF using [`Syncfusion.DocIORenderer.Net.Core`](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) library. diff --git a/ej2-angular/document-editor/how-to/get-current-word.md b/ej2-angular/document-editor/how-to/get-current-word.md index 127adf44ac..6d0b72c01b 100644 --- a/ej2-angular/document-editor/how-to/get-current-word.md +++ b/ej2-angular/document-editor/how-to/get-current-word.md @@ -43,11 +43,15 @@ export class AppComponent implements OnInit { this.container.documentEditor.selection.selectCurrentWord(); // To get the selected content as text - let selectedContent:string = this.container.documentEditor.selection.text; + let selectedContentText: string = this.container.documentEditor.selection.text; + // To get the selected content as SFDT (rich text) + let selectedContentSFDT: string = this.container.documentEditor.selection.sfdt; } } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + To get the bookmark content as SFDT (rich text), please check this [`link`](../../document-editor/how-to/get-the-selected-content/#get-the-selected-content-as-sfdt-rich-text) ## Select and get the paragraph in current cursor position @@ -78,8 +82,12 @@ export class AppComponent implements OnInit { // To select the current paragraph in document this.container.documentEditor.selection.selectParagraph(); - // To get the selected content as SFDT - let selectedContent: string = this.container.documentEditor.selection.sfdt; + // To get the selected content as text + let selectedContentText: string = this.container.documentEditor.selection.text; + // To get the selected content as SFDT (rich text) + let selectedContentSFDT: string = this.container.documentEditor.selection.sfdt; } } -``` \ No newline at end of file +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/get-the-selected-content.md b/ej2-angular/document-editor/how-to/get-the-selected-content.md index 9b9baa1fca..6da70ddc6b 100644 --- a/ej2-angular/document-editor/how-to/get-the-selected-content.md +++ b/ej2-angular/document-editor/how-to/get-the-selected-content.md @@ -61,6 +61,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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 add the following custom options using this API, * Save or export the selected text as text file. @@ -69,7 +71,7 @@ You can add the following custom options using this API, ## Get the selected content as SFDT (rich text) -You can use [`sfdt`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#sfdt-code-classlanguage-textstringcode) API to get the selected content as plain text from Angular Document Editor component. +You can use [`sfdt`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#sfdt-code-classlanguage-textstringcode) API to get the selected content as rich text from Angular Document Editor component. The following example code illustrates how to get the content of a bookmark and export it as SFDT. @@ -106,6 +108,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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 add the following custom options using this API, * Save or export the selected content as SFDT file. diff --git a/ej2-angular/document-editor/how-to/hide-tool-bar-and-properties-pane.md b/ej2-angular/document-editor/how-to/hide-tool-bar-and-properties-pane.md index 3137ac3644..69d14134f4 100644 --- a/ej2-angular/document-editor/how-to/hide-tool-bar-and-properties-pane.md +++ b/ej2-angular/document-editor/how-to/hide-tool-bar-and-properties-pane.md @@ -48,6 +48,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >Note: Positioning and customizing the properties pane in Document editor container is not possible. Instead, you can hide the exiting properties pane and create your own pane using public API's. ## Hide the toolbar @@ -83,6 +85,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## See Also * [How to customize the toolbar](../../document-editor/how-to/customize-tool-bar) \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/insert-page-number-and-navigate-to-page.md b/ej2-angular/document-editor/how-to/insert-page-number-and-navigate-to-page.md index a0e3116c2b..1198198c21 100644 --- a/ej2-angular/document-editor/how-to/insert-page-number-and-navigate-to-page.md +++ b/ej2-angular/document-editor/how-to/insert-page-number-and-navigate-to-page.md @@ -47,6 +47,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Also, you use [`insertField`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertfield) API in Editor module to insert the Page number in current position ```typescript @@ -86,6 +88,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Navigate to specific page You can use [`goToPage`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#gotopage) API in Selection module to move selection to the start of the specified page number. @@ -139,4 +143,6 @@ export class AppComponent implements OnInit { } } -``` \ No newline at end of file +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. diff --git a/ej2-angular/document-editor/how-to/insert-text-in-current-position.md b/ej2-angular/document-editor/how-to/insert-text-in-current-position.md index d81231933e..1d1ca19750 100644 --- a/ej2-angular/document-editor/how-to/insert-text-in-current-position.md +++ b/ej2-angular/document-editor/how-to/insert-text-in-current-position.md @@ -54,6 +54,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Insert paragraph in current cursor position To insert new paragraph at current selection, you can can use [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext) API with parameter as `\r\n` or `\n`. @@ -125,6 +127,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + * Please refer the following code example for server-side web implementation for HTML conversion using DocumentEditor. ```c# diff --git a/ej2-angular/document-editor/how-to/insert-text-or-image-in-table-programmatically.md b/ej2-angular/document-editor/how-to/insert-text-or-image-in-table-programmatically.md index e5a863d5d3..a467c2972f 100644 --- a/ej2-angular/document-editor/how-to/insert-text-or-image-in-table-programmatically.md +++ b/ej2-angular/document-editor/how-to/insert-text-or-image-in-table-programmatically.md @@ -94,5 +94,7 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + The output will be like below. ![Insert text or image in table programmatically](../images/table-image.png) diff --git a/ej2-angular/document-editor/how-to/move-selection-to-specific-position.md b/ej2-angular/document-editor/how-to/move-selection-to-specific-position.md index a274a184b9..7314409805 100644 --- a/ej2-angular/document-editor/how-to/move-selection-to-specific-position.md +++ b/ej2-angular/document-editor/how-to/move-selection-to-specific-position.md @@ -69,6 +69,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Document editor have [`selectionChange`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#selectionchange) event which is triggered whenever the selection changes in Document. ## Selects the content based on left and top position diff --git a/ej2-angular/document-editor/how-to/open-document-by-address.md b/ej2-angular/document-editor/how-to/open-document-by-address.md index 3cd2021058..ebbb273956 100644 --- a/ej2-angular/document-editor/how-to/open-document-by-address.md +++ b/ej2-angular/document-editor/how-to/open-document-by-address.md @@ -52,6 +52,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + please refer below example for server-side code ```csharp diff --git a/ej2-angular/document-editor/how-to/resize-document-editor.md b/ej2-angular/document-editor/how-to/resize-document-editor.md index b7a181ef8c..a84091fc33 100644 --- a/ej2-angular/document-editor/how-to/resize-document-editor.md +++ b/ej2-angular/document-editor/how-to/resize-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Resize document editor in Angular Document editor component | Syncfusion +title: Resize in Angular Document editor component | Syncfusion description: Learn here all about Resize document editor in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. platform: ej2-angular control: Resize document editor @@ -38,6 +38,8 @@ ngOnInit(): void { ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Similarly, you can use [`height`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#height) property for DocumentEditor also. ## Change width of Document Editor @@ -66,6 +68,8 @@ ngOnInit(): void { ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Similarly, you can use [`width`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#width) property for DocumentEditor also. ## Resize Document Editor @@ -108,4 +112,6 @@ export class AppComponent implements OnInit { this.container.resize(windowWidth, windowHeight); } } -``` \ No newline at end of file +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/retrieve-the-bookmark-content-as-text.md b/ej2-angular/document-editor/how-to/retrieve-the-bookmark-content-as-text.md index 94ee4984ba..21f497329b 100644 --- a/ej2-angular/document-editor/how-to/retrieve-the-bookmark-content-as-text.md +++ b/ej2-angular/document-editor/how-to/retrieve-the-bookmark-content-as-text.md @@ -61,6 +61,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + To get the bookmark content as SFDT (rich text), please check this [`link`](../../document-editor/how-to/get-the-selected-content/#get-the-selected-content-as-sfdt-rich-text) ## Get the whole document content as text @@ -107,6 +109,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Get the whole document content as SFDT(rich text) You can use [`serialize`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#serialize) API to get the whole document content as SFDT string from Angular Document Editor component. @@ -149,6 +153,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Get the header content as text You can use [`goToHeader`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#gotoheader) API to navigate the selection to the header and then use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the content as plain text. @@ -195,4 +201,6 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Similarly, you can use [`goToFooter`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#gotofooter) API to navigate the selection to the footer and then use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the content as plain text. \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/set-default-format-in-document-editor.md b/ej2-angular/document-editor/how-to/set-default-format-in-document-editor.md index 6bdc4b8859..743a5594b0 100644 --- a/ej2-angular/document-editor/how-to/set-default-format-in-document-editor.md +++ b/ej2-angular/document-editor/how-to/set-default-format-in-document-editor.md @@ -55,6 +55,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Similarly, you can change the required [`CharacterFormatProperties`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/characterFormatProperties) default value. The following example code illustrates how to change other character format default value in Document editor. @@ -108,6 +110,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Set the default paragraph format You can use [`setDefaultParagraphFormat`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#setdefaultparagraphformat) API to set the default paragraph format. You can change the required [`ParagraphFormatProperties`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/paragraphFormatProperties) default value. @@ -160,6 +164,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Set the default section format You can use [`setDefaultSectionFormat`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#setdefaultsectionformat) API to set the default section format. You can change the required [`SectionFormatProperties`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/sectionFormatProperties) default value. @@ -195,4 +201,6 @@ export class AppComponent implements OnInit { this.container.documentEditor.setDefaultSectionFormat(defaultSectionFormat); } } -``` \ No newline at end of file +``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. \ No newline at end of file diff --git a/ej2-angular/document-editor/how-to/show-hide-spinner.md b/ej2-angular/document-editor/how-to/show-hide-spinner.md index 76452b997e..993a8acf1b 100644 --- a/ej2-angular/document-editor/how-to/show-hide-spinner.md +++ b/ej2-angular/document-editor/how-to/show-hide-spinner.md @@ -36,4 +36,7 @@ Refer to the following example. {% previewsample "page.domainurl/samples/document-editor/document-editor-container-cs5" %} +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + + >Note: In above example, we have used setInterval to hide spinner, just for demo purpose. diff --git a/ej2-angular/document-editor/images/Column_Limit_Alert.png b/ej2-angular/document-editor/images/Column_Limit_Alert.png new file mode 100644 index 0000000000..01d15c9afa Binary files /dev/null and b/ej2-angular/document-editor/images/Column_Limit_Alert.png differ diff --git a/ej2-angular/document-editor/images/Row_Limit_Alert.png b/ej2-angular/document-editor/images/Row_Limit_Alert.png new file mode 100644 index 0000000000..147f9050a4 Binary files /dev/null and b/ej2-angular/document-editor/images/Row_Limit_Alert.png differ diff --git a/ej2-angular/document-editor/images/fontColor.png b/ej2-angular/document-editor/images/fontColor.png new file mode 100644 index 0000000000..3568c2c6c4 Binary files /dev/null and b/ej2-angular/document-editor/images/fontColor.png differ diff --git a/ej2-angular/document-editor/link.md b/ej2-angular/document-editor/link.md index 903bbe4b20..857ce623bb 100644 --- a/ej2-angular/document-editor/link.md +++ b/ej2-angular/document-editor/link.md @@ -70,6 +70,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + If the selection is in hyperlink, trigger this event by calling `navigateHyperlink` method of `Selection` instance. Refer to the following example. ```typescript diff --git a/ej2-angular/document-editor/notes.md b/ej2-angular/document-editor/notes.md index d5765cd643..56507ad7f2 100644 --- a/ej2-angular/document-editor/notes.md +++ b/ej2-angular/document-editor/notes.md @@ -56,6 +56,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Insert endnotes Document Editor exposes an API to insert endnotes at cursor position programmatically or can be inserted to the end of selected text. @@ -96,6 +98,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + ## Update or edit footnotes and endnotes You can update or edit the footnotes and endnotes using the built-in context menu shown up by right-clicking it. diff --git a/ej2-angular/document-editor/print.md b/ej2-angular/document-editor/print.md index a6d7d51353..ae1f878aca 100644 --- a/ej2-angular/document-editor/print.md +++ b/ej2-angular/document-editor/print.md @@ -63,6 +63,8 @@ export class AppComponent implements OnInit { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >Note: By default, printDevicePixelRatio value is 1. ## Print using window object diff --git a/ej2-angular/document-editor/section-format.md b/ej2-angular/document-editor/section-format.md index 5b388960ed..ad56012332 100644 --- a/ej2-angular/document-editor/section-format.md +++ b/ej2-angular/document-editor/section-format.md @@ -35,6 +35,8 @@ this.documentEditor.selection.sectionFormat.bottomMargin = 10; this.documentEditor.selection.sectionFormat.topMargin = 10; ``` +>Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584. + ## Header distance You can define the distance of header content from the top of the page by using the following sample code. @@ -93,4 +95,4 @@ this.container.documentEditor.editor.insertSectionBreak(SectionBreakType.Continu ## See Also -*[Page setup dialog](../document-editor/dialog#page-setup-dialog) \ No newline at end of file +*[Page setup dialog](../document-editor/dialog#page-setup-dialog) diff --git a/ej2-angular/document-editor/shapes.md b/ej2-angular/document-editor/shapes.md index d307d8aba7..14e74fa29e 100644 --- a/ej2-angular/document-editor/shapes.md +++ b/ej2-angular/document-editor/shapes.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Shapes in Angular Document editor component -Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, Document Editor does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly. +Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. + +>Note: At present, Document Editor does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly. ## Supported shapes diff --git a/ej2-angular/document-editor/table.md b/ej2-angular/document-editor/table.md index 2cb7653ad6..e47e426d33 100644 --- a/ej2-angular/document-editor/table.md +++ b/ej2-angular/document-editor/table.md @@ -22,7 +22,49 @@ Refer to the following sample code. this.documentEditor.editor.insertTable(3,3); ``` -The maximum size of row and column is limited to 32767 and 63 respectively. +## Set the maximum number of Rows when inserting a table + +You can use the [maximumRows](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings/#maximumrows) property to set the maximum number of rows allowed while inserting a table in the Document Editor component. + +```ts +@Component({ + template: `` +}) +export class AppComponent { + public settings: DocumentEditorSettingsModel = { + maximumRows: 4 + }; +} +``` + +When the maximum row limit is reached, an alert will appear, as follow + +![Row Limit Alert](images/Row_Limit_Alert.PNG) + +>Note: The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property. + +## Set the maximum number of Columns when inserting a table + +You can use the [maximumColumns](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings/#maximumcolumns) property to set the maximum number of Columns allowed while inserting a table in the Document Editor component. + +Refer to the following sample code. + +```ts +@Component({ + template: `` +}) +export class AppComponent { + public settings: DocumentEditorSettingsModel = { + maximumColumns: 4 + }; +} +``` + +When the maximum column limit is reached, an alert will appear, as follow + +![Column Limit Alert](images/Column_Limit_Alert.PNG) + +>Note: The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property. ## Insert rows @@ -156,4 +198,4 @@ The following sample demonstrates how to delete the table row or columns, merge ## See Also * [Feature modules](../document-editor/feature-module/) -* [Insert table dialog](../document-editor/dialog#table-dialog) \ No newline at end of file +* [Insert table dialog](../document-editor/dialog#table-dialog) diff --git a/ej2-angular/document-editor/text-format.md b/ej2-angular/document-editor/text-format.md index f20d8b8b4b..f4c2f1aa21 100644 --- a/ej2-angular/document-editor/text-format.md +++ b/ej2-angular/document-editor/text-format.md @@ -135,6 +135,19 @@ documenteditor.selection.characterFormat.fontSize= 32; ## Color +### Change Font Color by UI Option + +In the Document Editor, the Text Properties pane features two icons for managing text color within the user interface (UI): + +* **Colored Box:** This icon visually represents the **current color** applied to the selected text. +* **Text (A) Icon:** Clicking this icon allows users **to modify the color** of the selected text by choosing a new color from the available options. + +This Font Color option appear as follows. + +![Font Color](images/fontColor.PNG) + +### Change Font Color by Code + The color of selected text can be get or set using the following code. ```typescript diff --git a/ej2-angular/document-editor/track-changes.md b/ej2-angular/document-editor/track-changes.md index aedf32777e..3a85d1150e 100644 --- a/ej2-angular/document-editor/track-changes.md +++ b/ej2-angular/document-editor/track-changes.md @@ -20,6 +20,18 @@ The following example demonstrates how to enable track changes. ``` +>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. + +```typescript + + +onDocumentChange(): void { + if (this.container !== null) { + this.container.documentEditor.enableTrackChanges = true; + } +} +``` + ## Get all tracked revisions The following example demonstrate how to get all tracked revision from current document. @@ -130,6 +142,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + Tracked changes only protection can be enabled in UI by using [Restrict Editing pane](../document-editor/document-management#restrict-editing-pane) ![Enable track changes only protection](images/tracked-changes.png) @@ -180,4 +194,4 @@ export class AppComponent implements OnInit { } } } -``` \ No newline at end of file +``` diff --git a/ej2-angular/document-editor/view.md b/ej2-angular/document-editor/view.md index 0bb55c077b..c4f76cf226 100644 --- a/ej2-angular/document-editor/view.md +++ b/ej2-angular/document-editor/view.md @@ -35,6 +35,8 @@ export class AppComponent { } ``` +> The Web API hosted link `https://services.syncfusion.com/angular/production/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. + >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#layouttype) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/). ## Ruler @@ -76,3 +78,5 @@ export class AppComponent implements OnInit { } } ``` + +> The Web API hosted link `https://services.syncfusion.com/angular/production/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.