diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/header-footer.md b/Document-Processing/Word/Word-Processor/javascript-es6/header-footer.md index 70f9aa1d7a..55763bac22 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/header-footer.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/header-footer.md @@ -1,71 +1,71 @@ --- layout: post -title: Header footer in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Header footer in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Header and Footer in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about Header and Footer in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Header footer +control: Header and Footer documentation: ug domainurl: ##DomainURL## --- -# Header footer in JavaScript (ES6) Document editor control +# Header and Footer in JavaScript (ES6) Document Editor control -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports headers and footers in its document. Each section in the document can have the following types of headers and footers: +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports headers and footers in a document. Each section in the document can have the following types of headers and footers: * First page: Used only on the first page of the section. -* Even pages: Used on all even numbered pages in the section. +* Even pages: Used on all even-numbered pages in the section. * Default: Used on all pages of the section, where first or even pages are not applicable or not specified. -You can define this by setting format properties of the corresponding section using the following sample code. +You can define this by setting the format properties of the corresponding section using the following sample code. ```ts -//Defines whether different header footer is required for first page of the section -documenteditor.selection.sectionFormat.differentFirstPage = true; -//Defines whether different header footer is required for odd and even pages in the section -documenteditor.selection.sectionFormat.differentOddAndEvenPages = true; +//Defines whether a different header and footer is required for the first page of the section +documentEditor.selection.sectionFormat.differentFirstPage = true; +//Defines whether a different header and footer is required for odd and even pages in the section +documentEditor.selection.sectionFormat.differentOddAndEvenPages = true; ``` -## Go to header footer region +## Go to header or footer region -Double click in header or footer region to move the selection into it. You can also do this by using the following code. +Double-click in the header or footer region to move the selection into it. You can also do this by using the following code. ```ts -documenteditor.selection.goToHeader(); +documentEditor.selection.goToHeader(); ``` ```ts -documenteditor.selection.goToFooter(); +documentEditor.selection.goToFooter(); ``` ## Header and footer distance -You can define the distance of header region content from the top of the page. Refer to the following sample code. +You can define the distance of the header region content from the top of the page. Refer to the following sample code. ```ts -documenteditor.selection.sectionFormat.headerDistance= 36; +documentEditor.selection.sectionFormat.headerDistance = 36; ``` -Same way, you can define the distance of footer region content from the bottom of the page. Refer to the following sample code. +Similarly, you can define the distance of the footer region content from the bottom of the page. Refer to the following sample code. ```ts -documenteditor.selection.sectionFormat.footerDistace=36; +documentEditor.selection.sectionFormat.footerDistance = 36; ``` -## Close header footer region +## Close header and footer region -Move the selection to the document body from header or footer region by double clicking or tapping the document area. You can also perform this by using the following sample code. +Move the selection to the document body from the header or footer region by double-clicking or tapping the document area. You can also perform this by using the following sample code. ```ts -documenteditor.selection.closeHeaderFooter() +documentEditor.selection.closeHeaderFooter(); ``` ## Link to previous -Link to previous is enabled by default when document has more than one section. If you're using different headers and footers such as different first page or different odd and even pages, they can't be linked together because they're all separate. +Link to Previous is enabled by default when a document has more than one section. If you're using different headers and footers, such as a different first page or different odd and even pages, they can't be linked together because they're all separate. -Before setting or getting the link to previous value, use the ['goToHeader'](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotoheader) or ['goToFooter'](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotofooter) API to move the current selection to the header or footer region. +Before setting or getting the `linkToPrevious` value, use the [`goToHeader`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotoheader) or [`goToFooter`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotofooter) API to move the current selection to the header or footer region. -You can get or set the default header footer link to previous value of a section at cursor position by using the following sample code. +You can get or set the default header and footer link to previous value of a section at the cursor position by using the following sample code. ```typescript container.documentEditor.selection.sectionFormat.oddPageHeader.linkToPrevious = false; @@ -84,11 +84,11 @@ container.documentEditor.selection.sectionFormat.evenPageHeader.linkToPrevious = container.documentEditor.selection.sectionFormat.evenPageFooter.linkToPrevious = false; ``` ->Note: When there is more than one section in the document, the Link to Previous option becomes available. By default, this feature is disabled state in UI and set to return false for the first section. +N> When there is more than one section in the document, the Link to Previous option becomes available. By default, this feature is disabled in the UI and set to return false for the first section. ## Online Demo -Explore how to add and customize headers and footers in Word documents using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/headers-and-footers.html). +Explore how to add and customize headers and footers in Word documents using the JavaScript DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/headers-and-footers.html). ## See Also diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/history.md b/Document-Processing/Word/Word-Processor/javascript-es6/history.md index a7fc915df0..41dae246ca 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/history.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/history.md @@ -1,30 +1,30 @@ --- layout: post -title: History in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about History in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: History in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about History in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: History +control: History documentation: ug domainurl: ##DomainURL## --- -# History in JavaScript (ES6) Document editor control +# History in JavaScript (ES6) Document Editor control -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) tracks the history of all editing actions done in the document, which allows undo and redo functionality. +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) tracks the history of all editing actions performed in the document, enabling undo and redo functionality. ## Enable or disable history -Inject the ‘EditorHistory’ module in your application to provide history preservation functionality for ‘DocumentEditor’. Refer to the following code example. +Inject the `EditorHistory` module in your application to provide history preservation functionality for the `DocumentEditor`. Refer to the following code example. ```ts -//Inject require modules. +//Inject required modules. DocumentEditor.Inject(Editor, Selection, EditorHistory); let editor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false }); //Enable editor history module. editor.enableEditorHistory = true; ``` -You can enable or disable history preservation for a Document Editor instance any time using the ‘enableEditorHistory’ property. Refer to the following sample code. +You can enable or disable history preservation for a Document Editor instance at any time using the `enableEditorHistory` property. Refer to the following sample code. ```ts editor.enableEditorHistory = false; @@ -32,9 +32,9 @@ editor.enableEditorHistory = false; ## Undo and redo -You can perform undo and redo by ‘CTRL+Z’ and ‘CTRL+Y’ keyboard shortcuts. Document Editor exposes API to do it programmatically. +You can perform undo and redo using the `Ctrl + Z` and `Ctrl + Y` keyboard shortcuts. The Document Editor exposes an API to do it programmatically. -To undo the last editing operation in Document Editor, refer to the following sample code. +To undo the last editing operation in the Document Editor, refer to the following sample code. ```ts editor.editorHistory.undo(); @@ -48,7 +48,7 @@ editor.editorHistory.redo(); ## Stack size -History of editing actions will be maintained in stack, so that the last item will be reverted first. By default, Document Editor limits the size of undo and redo stacks to 500 each respectively. However, you can customize this limit. Refer to the following sample code. +History of editing actions will be maintained in a stack, so that the last item will be reverted first. By default, the Document Editor limits the size of undo and redo stacks to 500 each, respectively. However, you can customize this limit. Refer to the following sample code. ```ts //Set undo limit. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to.md index 405a464f6b..9b8ac923a9 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to.md @@ -1,20 +1,20 @@ --- layout: post -title: How to in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about How to in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: How to in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about How to in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: How to +control: How to documentation: ug domainurl: ##DomainURL## --- -# How to in JavaScript (ES6) Document editor control +# How to in JavaScript (ES6) Document Editor control -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs/) event every time when any key is entered and provides an instance of `DocumentEditorKeyDownEventArgs`. You can use the `isHandled` property to override the keyboard shortcut behavior. +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs) event every time a key is pressed and provides an instance of `DocumentEditorKeyDownEventArgs`. You can use the `isHandled` property to override the keyboard shortcut behavior. ## Preventing default keyboard shortcut -The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in Document Editor. +The following code shows how to prevent the `Ctrl + C` keyboard shortcut for copying selected content in the Document Editor. @@ -31,9 +31,9 @@ The following code shows how to prevent the `CTRL + C` keyboard shortcut for cop ## Override or define the keyboard shortcut -Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut. +You can override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut. -For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save a document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format. +For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save the document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/change-the-default-search-highlight-color.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/change-the-default-search-highlight-color.md index b7470a1a8f..338b9a8ba7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/change-the-default-search-highlight-color.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/change-the-default-search-highlight-color.md @@ -1,23 +1,23 @@ --- layout: post -title: Change the default search highlight color in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Change the default search highlight color in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Search Highlight Color in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to change the default search highlight color in Syncfusion JavaScript (ES6) Document Editor using the searchHighlightColor setting. platform: document-processing -control: Change the default search highlight color +control: Change the Default Search Highlight Color documentation: ug domainurl: ##DomainURL## --- -# Change the default search highlight color in JavaScript (ES6) Document editor control +# Change Search Highlight Color in JavaScript (ES6) Document Editor -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides an options to change the default search highlight color using [`searchHighlightColor`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#searchhighlightcolor) in Document editor settings. The highlight color which is given in [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor-container#documenteditorsettings) will be highlighted on the searched text. By default, search highlight color is `yellow`. +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides an option to change the default search highlight color using [`searchHighlightColor`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#searchhighlightcolor) in the Document Editor settings. The highlight color specified in [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor-container#documenteditorsettings) will be applied to the searched text. By default, the search highlight color is `yellow`. -Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also. +Similarly, you can use the [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor#documenteditorsettings) property for the DocumentEditor as well. The following example code illustrates how to change the default search highlight color. ```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', // Add required search highlight color documentEditorSettings: { searchHighlightColor: 'Grey', @@ -26,11 +26,10 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo DocumentEditorContainer.Inject(Toolbar); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); - ``` -> 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: ![How to change the default search highlight color](../images/search-color.png) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/customize-color-picker.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/customize-color-picker.md index 158c50908e..8b9941e5d7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/customize-color-picker.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/customize-color-picker.md @@ -1,24 +1,24 @@ --- layout: post -title: Customize color picker in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Customize color picker in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Customize color picker in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to customize the color picker in Syncfusion JavaScript (ES6) Document Editor using the colorPickerSettings for font and border colors. platform: document-processing -control: Customize Color Picker +control: Customize Color Picker documentation: ug domainurl: ##DomainURL## --- -# Customize color picker in JavaScript (ES6) Document editor control +# Customize Color Picker in JavaScript (ES6) Document Editor -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings) in Document editor settings. The color picker offers customization for default appearance, by allowing selection between Picker or Palette mode, for font and border colors. +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides an option to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings) in the Document Editor settings. The color picker offers customization for the default appearance, allowing selection between Picker or Palette mode for font and border colors. -Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also. +Similarly, you can use the [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor#documenteditorsettings) property for the DocumentEditor as well. -The following example code illustrates how to Customize the color picker in Document editor container. +The following example code illustrates how to customize the color picker in the Document Editor container. ```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', - //Customizing options for color picker. +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', + //Customizing options for the color picker. documentEditorSettings: { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true }, } @@ -28,21 +28,21 @@ container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor container.appendTo('#container'); ``` -> 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. The following table illustrates all the possible properties for the color picker. | Property | Behavior | |---|---| | columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 | -| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false | -| mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ | -| 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 | +| disabled | It is used to enable / disable the ColorPicker component. If it is disabled, the ColorPicker popup won't open. Defaults to false | +| mode | It is used to render the ColorPicker with the specified mode. Defaults to `Picker` | +| modeSwitcher | It is used to show / hide the mode switcher button of the ColorPicker component. Defaults to true | +| showButtons | It is used to show / hide the control buttons (apply / cancel) of the 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. +N> 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 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. ## Online Demo -Explore how to customize the color picker in the JavaScript Document Editor for Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/colorpicker-customization.html). \ No newline at end of file +Explore how to customize the color picker in the JavaScript DOCX Editor for Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/colorpicker-customization.html). \ No newline at end of file