From c82bcc5fb4efe89a7fe21f82696f97c648488821 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Fri, 14 Aug 2026 00:45:13 +0530 Subject: [PATCH 1/3] Resolved from table-of-contents.md to text-format.md --- .../javascript-es5/table-of-contents.md | 35 ++++--- .../javascript-es5/text-format.md | 91 +++++++++---------- 2 files changed, 61 insertions(+), 65 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md b/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md index 307c34152b..18e7c8420c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md @@ -10,31 +10,30 @@ domainurl: ##DomainURL## # Table of contents in JavaScript (ES5) Document editor control -The table of contents in a document is same as the list of chapters at the beginning of a book. It lists each heading in the document and the page number, where that heading starts with various options to customize the appearance. +The table of contents in a document is the same as the list of chapters at the beginning of a book. It lists each heading in the document and the page number where that heading starts, with various options to customize the appearance. -## Inserting table of contents +## Inserting a table of contents -[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) exposes an API to insert table of contents at cursor position programmatically. You can specify the settings for table of contents explicitly. Otherwise, the default settings will be applied. +[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) exposes an API to insert a table of contents at the cursor position programmatically. You can specify the settings for the table of contents explicitly. Otherwise, the default settings will be applied. -[`TableOfContentsSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/tableOfContentsSettings) contain the following properties: -* **startLevel**: Specifies the start level for constructing table of contents. -* **endLevel**: Specifies the end level for constructing table of contents. +The [`TableOfContentsSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/tableOfContentsSettings) class contains the following properties: +* **startLevel**: Specifies the start level for constructing the table of contents. +* **endLevel**: Specifies the end level for constructing the table of contents. * **includeHyperlink**: Specifies whether the link for headings is included. -* **includePageNumber**: Specified whether the page number of the headings is included. -* **rightAlign**: Specifies whether the page number is right aligned. +* **includePageNumber**: Specifies whether the page number of the headings is included. +* **rightAlign**: Specifies whether the page number is right-aligned. * **tabLeader**: Specifies the tab leader styles such as none, dot, hyphen, and underscore. * **includeOutlineLevels**: Specifies whether the outline levels are included. -The following code illustrates how to insert table of content in Document Editor. +The following code illustrates how to insert a table of contents in Document Editor. ```js var tocSettings = { startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true }; -//Insert table of contents in Document Editor. +// Insert a table of contents in Document Editor. editor.editorModule.insertTableOfContents(tocSettings); - ``` {% tabs %} @@ -48,16 +47,16 @@ editor.editorModule.insertTableOfContents(tocSettings); {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/table-of-contents-cs1" %} -## Update or edit table of contents +## Update or edit the table of contents -You can update or edit the table of contents using the built-in context menu shown up by right-clicking it. Refer to the following screenshot. +You can update or edit the table of contents using the built-in context menu that appears when you right-click it. Refer to the following screenshot. ![Table of Contents](images/table-of-contents.png) -* **Update Field**: Updates the headings in table of contents with same settings by searching the entire document. +* **Update Field**: Updates the headings in the table of contents with the same settings by searching the entire document. * **Edit Field**: Opens the built-in table of contents dialog and allows you to modify its settings. -You can also do it programmatically by using the exposed API. Refer to the following sample code. +You can also update or edit it programmatically by using the exposed API. Refer to the following sample code. ```js @@ -65,16 +64,16 @@ var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, documentEditor.appendTo('#DocumentEditor'); /*Open any existing document*/ documentEditor.open(''); -//Table of contents settings. +// Table of contents settings. var tocSettings = { startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true }; -//Insert table of contents in Document Editor. +// Insert a table of contents in Document Editor. documentEditor.editorModule.insertTableOfContents(tocSettings); ``` ->Same method is used for inserting, updating, and editing table of contents. This will work based on the current element at cursor position and the optional settings parameter. If table of contents is present at cursor position, the update operation will be done based on the optional settings parameter. Otherwise, the insert operation will be done. +N> The same method is used for inserting, updating, and editing the table of contents. This works based on the current element at the cursor position and the optional settings parameter. If a table of contents is present at the cursor position, the update operation is performed based on the optional settings parameter. Otherwise, the insert operation is performed. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md index 2a0fc7d41b..113c75977a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md @@ -8,24 +8,22 @@ documentation: ug domainurl: ##DomainURL## --- -# Text format in JavaScript (ES5) Document editor control +# Text format in JavaScript (ES5) Document Editor control -[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports several formatting options for text like bold, italic, font color, highlight color, and more. This section describes how to modify the formatting for selected text in detail. +[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports several formatting options for text such as bold, italic, font color, highlight color, and more. This section describes how to modify the formatting for selected text in detail. ## Bold -The bold formatting for selected text can be get or set by using the following sample code. +The bold formatting for selected text can be retrieved or set by using the following sample code. ```js - -//Gets the value for bold formatting of selected text. -let bold = documenteditor.selection.characterFormat.bold; -//Sets bold formatting for selected text. +// Gets the value for bold formatting of selected text. +var bold = documenteditor.selection.characterFormat.bold; +// Sets bold formatting for selected text. documenteditor.selection.characterFormat.bold = true; - ``` -You can toggle the bold formatting based on existing value at selection. Refer to the following sample code. +You can toggle the bold formatting based on the existing value at the selection. Refer to the following sample code. ```js documenteditor.editor.toggleBold(); @@ -33,16 +31,16 @@ documenteditor.editor.toggleBold(); ## Italic -The Italic formatting for selected text can be get or set by using the following sample code. +The italic formatting for selected text can be retrieved or set by using the following sample code. ```js -//Gets the value for italic formatting of selected text. +// Gets the value for italic formatting of selected text. var italic = documenteditor.selection.characterFormat.italic; -//Sets italic formatting for selected text. -documenteditor.selection.characterFormat.italic = true|false; +// Sets italic formatting for selected text. +documenteditor.selection.characterFormat.italic = true; ``` -You can toggle the Italic formatting based on existing value at selection. Refer to the following sample code. +You can toggle the italic formatting based on the existing value at the selection. Refer to the following sample code. ```js documenteditor.editor.toggleItalic(); @@ -50,16 +48,16 @@ documenteditor.editor.toggleItalic(); ## Underline property -The underline style for selected text can be get or set by using the following sample code. +The underline style for selected text can be retrieved or set by using the following sample code. ```js -//Gets the value for underline formatting of selected text. +// Gets the value for underline formatting of selected text. var underline = documenteditor.selection.characterFormat.underline; -//Sets underline formatting for selected text. -documenteditor.selection.characterFormat.underline = 'Single' | 'None'; +// Sets underline formatting for selected text. +documenteditor.selection.characterFormat.underline = 'Single'; ``` -You can toggle the underline style of selected text based on existing value at selection by specifying a value. Refer to the following sample code. +You can toggle the underline style of selected text based on the existing value at the selection by specifying a value. Refer to the following sample code. ```js documenteditor.editor.toggleUnderline('Single'); @@ -67,16 +65,16 @@ documenteditor.editor.toggleUnderline('Single'); ## Strikethrough property -The strikethrough style for selected text can be get or set by using the following sample code. +The strikethrough style for selected text can be retrieved or set by using the following sample code. ```js -//Gets the value for strikethrough formatting of selected text. +// Gets the value for strikethrough formatting of selected text. var strikethrough = documenteditor.selection.characterFormat.strikethrough; -//Sets strikethrough formatting for selected text. -documenteditor.selection.characterFormat.strikethrough = 'Single' | 'Normal'; +// Sets strikethrough formatting for selected text. +documenteditor.selection.characterFormat.strikethrough = 'Single'; ``` -You can toggle the strikethrough style of selected text based on existing value at selection by specifying a value. Refer to the following sample code. +You can toggle the strikethrough style of selected text based on the existing value at the selection by specifying a value. Refer to the following sample code. ```js documenteditor.editor.toggleStrikethrough(); @@ -87,9 +85,9 @@ documenteditor.editor.toggleStrikethrough(); The selected text can be made superscript by using the following sample code. ```js -//Gets the value for baselineAlignment formatting of selected text. +// Gets the value for baselineAlignment formatting of selected text. var baselineAlignment = documenteditor.selection.characterFormat.baselineAlignment; -//Sets baselineAlignment formatting for selected text. +// Sets baselineAlignment formatting for selected text. documenteditor.selection.characterFormat.baselineAlignment = 'Superscript'; ``` @@ -104,9 +102,9 @@ documenteditor.editor.toggleSuperscript(); The selected text can be made subscript by using the following sample code. ```js -//Gets the value for baselineAlignment formatting of selected text. +// Gets the value for baselineAlignment formatting of selected text. var baselineAlignment = documenteditor.selection.characterFormat.baselineAlignment; -//Sets baselineAlignment formatting for selected text. +// Sets baselineAlignment formatting for selected text. documenteditor.selection.characterFormat.baselineAlignment = 'Subscript'; ``` @@ -116,7 +114,7 @@ Toggle the selected text as subscript or normal using the following sample code. documenteditor.editor.toggleSubscript(); ``` -You can make a subscript or superscript text as normal using the following code. +You can reset subscript or superscript text to normal using the following code. ```js documenteditor.selection.characterFormat.baselineAlignment = 'Normal'; @@ -124,20 +122,20 @@ documenteditor.selection.characterFormat.baselineAlignment = 'Normal'; ## Change case -You can apply different case formatting based on the selected text. Refer to the following sample code. +You can apply different case formatting to the selected text. Refer to the following sample code. ```js -documenteditor.editor.changeCase('Uppercase'|'Lowercase'|'SentenceCase'|'ToggleCase'|'CapitalizeEachWord'); +documenteditor.editor.changeCase('Uppercase'); ``` ## Size -The size of selected text can be get or set using the following code. +The size of selected text can be retrieved or set using the following code. ```js -//Gets the value for fontSize formatting of selected text. +// Gets the value for fontSize formatting of selected text. var fontSize = documenteditor.selection.characterFormat.fontSize; -//Sets fontSize formatting for selected text. +// Sets fontSize formatting for selected text. documenteditor.selection.characterFormat.fontSize = 32; ``` @@ -150,41 +148,41 @@ In the Document Editor, the Text Properties pane features two icons for managing * **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. +This Font Color option appears 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. +The color of selected text can be retrieved or set using the following code. ```js -//Gets the value for fontColor formatting of selected text. +// Gets the value for fontColor formatting of selected text. var fontColor = documenteditor.selection.characterFormat.fontColor; -//Sets fontColor formatting for selected text. +// Sets fontColor formatting for selected text. documenteditor.selection.characterFormat.fontColor = 'Pink'; documenteditor.selection.characterFormat.fontColor = '#FFC0CB'; ``` ## Font -The font style of selected text can be get or set using the following sample code. +The font style of selected text can be retrieved or set using the following sample code. ```js -//Gets the value for fontFamily formatting of selected text. -var baselineAlignment = documenteditor.selection.characterFormat.fontFamily; -//Sets fontFamily formatting for selected text. +// Gets the value for fontFamily formatting of selected text. +var fontFamily = documenteditor.selection.characterFormat.fontFamily; +// Sets fontFamily formatting for selected text. documenteditor.selection.characterFormat.fontFamily = 'Arial'; ``` ## Highlight color -The highlight color of the selected text can be get or set using the following sample code. +The highlight color of the selected text can be retrieved or set using the following sample code. ```js -//Gets the value for highlightColor formatting of selected text. +// Gets the value for highlightColor formatting of selected text. var highlightColor = documenteditor.selection.characterFormat.highlightColor; -//Sets highlightColor formatting for selected text. +// Sets highlightColor formatting for selected text. documenteditor.selection.characterFormat.highlightColor = 'Pink'; ``` @@ -197,9 +195,8 @@ The bidi property controls whether selected text is displayed as right-to-left ( ```js // Get Bidi value of selected text var bidi = documenteditor.selection.characterFormat.bidi; - // Set Bidi for selected text -documenteditor.selection.characterFormat.bidi= true; +documenteditor.selection.characterFormat.bidi = true; ``` ## Toolbar with options for text formatting From a2f486fc4c76f57c8f58b3a1e6d6357385e493bd Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Fri, 14 Aug 2026 08:33:33 +0530 Subject: [PATCH 2/3] Resolved the errors from the text-format.md to track-changes.md --- .../javascript-es5/text-format.md | 9 ++- .../javascript-es5/text-wrapping-style.md | 28 +++---- .../javascript-es5/track-changes.md | 79 ++++++++----------- 3 files changed, 54 insertions(+), 62 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md index 113c75977a..27e144cb31 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md @@ -186,16 +186,17 @@ var highlightColor = documenteditor.selection.characterFormat.highlightColor; documenteditor.selection.characterFormat.highlightColor = 'Pink'; ``` -N> 1. Character scaling and spacing present in the input Word document will be preserved in the exported Word document. N> 2. Scaling is implemented using the letterSpacing property, which may present compatibility problems. For more information, please refer to this [link](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing#browser_compatibility) +N> 1. Character scaling and spacing present in the input Word document are preserved in the exported Word document. +N> 2. Scaling is implemented using the letterSpacing property, which may present compatibility problems. For more information, please refer to this [link](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing#browser_compatibility). ## Bidirectional -The bidi property controls whether selected text is displayed as right-to-left (RTL) or left-to-right (LTR) for proper multilingual formatting. You can get or set this property using the following code example. +The bidi property controls whether selected text is displayed as right-to-left (RTL) or left-to-right (LTR) for proper multilingual formatting. You can retrieve or set this property using the following code example. ```js -// Get Bidi value of selected text +// Gets the value for bidi of selected text. var bidi = documenteditor.selection.characterFormat.bidi; -// Set Bidi for selected text +// Sets bidi for selected text. documenteditor.selection.characterFormat.bidi = true; ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/text-wrapping-style.md b/Document-Processing/Word/Word-Processor/javascript-es5/text-wrapping-style.md index 667b2c8426..ba1748dfb0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/text-wrapping-style.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/text-wrapping-style.md @@ -10,42 +10,42 @@ domainurl: ##DomainURL## # Text wrapping style in JavaScript (ES5) Document editor control -Text wrapping refers to how images and shapes are fit with surrounding text in a document. Currently, [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) has only preservation support for image and textbox shape with below wrapping styles. +Text wrapping refers to how images and shapes are fit with surrounding text in a document. Currently, [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) has only preservation support for images and textbox shapes with the wrapping styles listed below. ## In-Line with Text -In this option, the image or shape is placed on the same line surrounding with text like any other word or letter. This image or shape will be automatically moved along with the text while editing, whereas the other options denote that the image or shape stays in a fixed position while the text shifts and wraps around it. +In this option, the image or shape is placed on the same line as the surrounding text, like any other word or letter. This image or shape will be automatically moved along with the text while editing, whereas the other options denote that the image or shape stays in a fixed position while the text shifts and wraps around it. -![view of image with inline wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/inline-textwrapping.PNG) +![view of image with inline wrapping style in Document Editor](images/Text-Wrapping-Style_images/inline-textwrapping.PNG) ## In Front of Text -In this option, the image or shape is placed in front of the text. This can be used to place an image around some text or to add shape to highlight the part in a paragraph. +In this option, the image or shape is placed in front of the text. This can be used to place an image over text or to add a shape to highlight part of a paragraph. -![view of image with in front of text wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/infront-textwrapping.PNG) +![view of image with in front of text wrapping style in Document Editor](images/Text-Wrapping-Style_images/infront-textwrapping.PNG) ->Note: Starting from v18.2.0.x, the in front of wrapping styles are supported. +N> Starting from v18.2.0.x, the "In Front of Text" wrapping style is supported. ## Top and Bottom -In this option, Text wraps above and below the image or shape. No text is to the left or right of the image or shape. This can be used for larger images or shapes that occupy most of the width in a document. +In this option, text wraps above and below the image or shape. No text is to the left or right of the image or shape. This can be used for larger images or shapes that occupy most of the width in a document. ->Note: Starting from v19.1.0.x, the top and bottom wrapping style is supported. +N> Starting from v19.1.0.x, the "Top and Bottom" wrapping style is supported. -![view of image with top and bottom wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG) +![view of image with top and bottom wrapping style in Document Editor](images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG) ## Behind In this option, the image or shape is placed behind the text. This can be used when you need to add a watermark or background image to a document. -![view of image with behind wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/behind-textwrapping.PNG) +![view of image with behind wrapping style in Document Editor](images/Text-Wrapping-Style_images/behind-textwrapping.PNG) ->Note: Starting from v19.2.0.x, behind text wrapping styles are supported. +N> Starting from v19.2.0.x, the "Behind" wrapping style is supported. ## Square -In this option, Text wraps around the image or text box in a square shape. +In this option, text wraps around the image or text box in a square shape. ->Note: Tight and Through styles will be preserved as square wrapping style in DocumentEditor which is supported from v19.2.0.x. +![view of shape with square wrapping style in Document Editor](images/Text-Wrapping-Style_images/square-textwrapping.PNG) -![view of shape with square wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/square-textwrapping.PNG) +N> The "Tight" and "Through" styles are preserved as the "Square" wrapping style in Document Editor, supported from v19.2.0.x. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md b/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md index 8a3d2efc3a..edb72d32de 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Track changes in JavaScript (ES5) Document editor control -Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If track changes option is enabled, all editing operations are preserved as revisions in [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). +Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If the track changes option is enabled, all editing operations are preserved as revisions in [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). ## Enable track changes in Document Editor @@ -21,7 +21,7 @@ var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChang container.appendTo('#container'); ``` ->Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set enableTrackChanges : true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes during the document change event. The following example demonstrates how to enable Track changes for the all the Document while Opening. +N> Track changes are document-level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges is disabled even if you set enableTrackChanges: true during initial rendering. If you want to enable track changes for all documents, we recommend enabling track changes during the document change event. The following example demonstrates how to enable track changes for all the documents while opening. ```js container.documentChange = function () { @@ -32,27 +32,25 @@ container.documentChange = function () { ``` ## Show/Hide Revisions Pane - + The Show/Hide Revisions Pane feature in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document. - + The following example code illustrates how to show/hide the revisions pane. ```js - var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true }); -ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); +ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); container.appendTo('#container'); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; -container.documentEditor.showRevisions = true; // To show revisions pane -container.documentEditor.showRevisions = false; // To hide revisions pane - +container.documentEditor.showRevisions = true; // To show the revisions pane. +container.documentEditor.showRevisions = false; // To hide the revisions pane. ``` -> 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. ## Get all tracked revisions -The following example demonstrate how to get all tracked revision from current document. +The following example demonstrates how to get all tracked revisions from the current document. ```js var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true }); @@ -89,26 +87,20 @@ revisions.rejectAll(); ## Accept or reject a specific revision -The following example demonstrates how to accept/reject specific revision in the Document Editor. +The following example demonstrates how to accept or reject a specific revision in the Document Editor. ```js -/** - * Get revisions from the current document - */ +// Get revisions from the current document. var revisions = container.documentEditor.revisions; -/** - * Accept specific changes - */ +// Accept specific changes. revisions.get(0).accept(); -/** - * Reject specific changes - */ +// Reject specific changes. revisions.get(1).reject(); ``` ## Navigate between the tracked changes -The following example demonstrates how to navigate tracked revision programmatically. +The following example demonstrates how to navigate tracked changes programmatically. ```js var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true }); @@ -138,68 +130,66 @@ var container = new ej.documenteditor.DocumentEditor({ revisionSettings: { customData: 'Developer', showCustomDataWithAuthor: true - }} + }} }); -DocumentEditorContainer.Inject(Toolbar); +ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.Toolbar); container.appendTo('#container'); - ``` The Track Changes pane will display the author name along with the custom metadata, as shown in the screenshot below. ![Custom metadata along with author](images/track-changes-customData.png) ->Note: -* When you export the document as SFDT, the customData value is stored in the revision collection. When you reopen the SFDT, the custom data is automatically restored and displayed in the Track Changes pane. -* Other than SFDT export (e.g. DOCX and other), the customData is not preserved, as it is specific to the Document Editor component. +N> 1. When you export the document as SFDT, the customData value is stored in the revision collection. When you reopen the SFDT, the custom data is automatically restored and displayed in the Track Changes pane. +N> 2. For formats other than SFDT (e.g., DOCX), the customData is not preserved, as it is specific to the Document Editor component. ## Filtering changes based on user -In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user. +Document Editor provides a built-in review panel with support for filtering changes based on the user. ![Track changes](images/track-changes.png) ## Protect the document in track changes only mode -Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, all the users are allowed to view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes. +Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, users can view the document and make corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes. -Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection) API. +Document Editor provides an option to protect and unprotect a document using the [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection) API. -The following example code illustrates how to enforce and stop protection in Document editor container. +The following example code illustrates how to enforce and stop protection in the Document Editor container. ```js var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px', }); -ej.documenteditor.DocumentEditorContainer.Inject(Toolbar); +ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); container.serviceUrl = 'http://localhost:5000/api/documenteditor/'; container.appendTo('#container'); -//enforce protection +// Enforce protection. container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly'); -//stop the document protection +// Stop the document protection. container.documentEditor.editor.stopProtection('123'); ``` -Tracked changes only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane) +Tracked changes only protection can be enabled in the UI by using the [Restrict Editing pane](./document-management#restrict-editing-pane). ![Enable track changes only protection](images/tracked-changes.png) ->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly |RevisionsOnly`. In stop protection method, parameter denotes the password. +N> In the enforceProtection method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of the protection type are `NoProtection`, `ReadOnly`, `FormFieldsOnly`, `CommentsOnly`, and `RevisionsOnly`. In the stopProtection method, the parameter denotes the password. ## Events -DocumentEditor provides [beforeAcceptRejectChanges](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before a tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content. . +Document Editor provides the [beforeAcceptRejectChanges](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content. -To demonstrate a specific use case, let's consider an example where we want to restrict the accept and reject changes functionality based on the author name. The following code snippet illustrates how to allow only the author of the tracked content to accept or reject changes: +To demonstrate a specific use case, consider an example where you want to restrict the accept and reject changes functionality based on the author name. The following code snippet illustrates how to allow only the author of the tracked content to accept or reject changes: ```js -var container = new ej.documenteditor.DocumentEditorContainer({ - beforeAcceptRejectChanges:{beforeAcceptRejectChanges}, +var container = new ej.documenteditor.DocumentEditorContainer({ + beforeAcceptRejectChanges: beforeAcceptRejectChanges, enableToolbar: true, height: '590px', currentUser: 'Hary' @@ -208,15 +198,16 @@ ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); container.appendTo('#container'); -// Event get triggerd before accepting/rejecting changes +// Event triggered before accepting/rejecting changes. function beforeAcceptRejectChanges(args) { - // Check the author of the revision and current user are different + // Check if the author of the revision and the current user are different. if (args.author !== container.currentUser) { - // Cancel the accept/reject action + // Cancel the accept/reject action. args.cancel = true; } } ``` + ## Online Demo Explore how to track and review changes in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/track-changes.html). \ No newline at end of file From 145766a8597c4e4f135527651ab4dbf0333b72e8 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Fri, 14 Aug 2026 08:46:16 +0530 Subject: [PATCH 3/3] Modified contents for table.md and text-format.md --- .../Word-Processor/javascript-es5/table.md | 83 ++++++++++--------- .../javascript-es5/text-format.md | 2 +- 2 files changed, 44 insertions(+), 41 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table.md b/Document-Processing/Word/Word-Processor/javascript-es5/table.md index 643634ecd5..31d330ac65 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table.md @@ -10,17 +10,18 @@ domainurl: ##DomainURL## # Table in JavaScript (ES5) Document editor control -Tables are an efficient way to present information. [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) can display and edit the tables. You can select and edit tables through keyboard, mouse, or touch interactions. Document Editor exposes a rich set of APIs to perform these operations programmatically. +Tables are an efficient way to present information. [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) can display and edit tables. You can select and edit tables through keyboard, mouse, or touch interactions. Document Editor exposes a rich set of APIs to perform these operations programmatically. ## Create a table -You can create and insert a table at cursor position by specifying the required number of rows and columns. +You can create and insert a table at the cursor position by specifying the required number of rows and columns. Refer to the following sample code. ```ts - documenteditor.editor.insertTable(3,3); +documenteditor.editor.insertTable(3, 3); ``` + ## Set the maximum number of rows when inserting a table You can use the [maximumRows](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettings#maximumrows) property to set the maximum number of rows allowed while inserting a table in the Document Editor component. @@ -28,14 +29,15 @@ You can use the [maximumRows](https://ej2.syncfusion.com/javascript/documentatio Refer to the following sample code. ```ts - let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { maximumRows: 4 } }); +let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { maximumRows: 4 } }); ``` -When the maximum row limit is reached, an alert will appear, as follow +When the maximum row limit is reached, an alert will appear, as follows: + +![Row Limit Alert](images/Row_Limit_Alert.PNG) -![Row Limit Alert](images/Row_Limit_Alert.PNG) +N> The maximum value of the Row property is 32767, as per the Microsoft Word application, and you can set any value less than or equal to 32767 to this property. ->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/javascript/documentation/api/document-editor/documentEditorSettings#maximumcolumns) property to set the maximum number of columns allowed while inserting a table in the Document Editor component. @@ -46,54 +48,54 @@ Refer to the following sample code. let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { maximumColumns: 4 } }); ``` -When the maximum column limit is reached, an alert will appear, as follow +When the maximum column limit is reached, an alert will appear, as follows: -![Column Limit Alert](images/Column_Limit_Alert.PNG) +![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. +N> The maximum value of the Column property is 63, as per the Microsoft Word application, and you can set any value less than or equal to 63 to this property. ## Insert rows -You can add a row (or several rows) above or below the row at cursor position by using the [`insertRow`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertrow) method. This method accepts the following parameters: +You can add a row (or several rows) above or below the row at the cursor position by using the [`insertRow`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertrow) method. This method accepts the following parameters: Parameter | Type | Description ----------|------|------------- -above(optional) | boolean | This is optional and if omitted, it takes the value as false and inserts below the row at cursor position. -count(optional) | number | This is optional and if omitted, it takes the value as 1. +above (optional) | boolean | Optional. Defaults to false and inserts below the row at the cursor position. +count (optional) | number | Optional. Defaults to 1. Refer to the following sample code. ```ts -//Inserts a row below the row at cursor position -documentedior.editor.insertRow(); +// Inserts a row below the row at the cursor position. +documenteditor.editor.insertRow(); -//Inserts a row above the row at cursor position -documentedior.editor.insertRow(false); +// Inserts a row above the row at the cursor position. +documenteditor.editor.insertRow(true); -//Inserts three rows below the row at cursor position -documentedior.editor.insertRow(true, 3) +// Inserts three rows above the row at the cursor position. +documenteditor.editor.insertRow(true, 3); ``` ## Insert columns -You can add a column (or several columns) to the left or right of the column at cursor position by using the [`insertColumn`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertcolumn) method. This method accepts the following parameters: +You can add a column (or several columns) to the left or right of the column at the cursor position by using the [`insertColumn`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertcolumn) method. This method accepts the following parameters: Parameter | Type | Description ----------|------|------------- -left(optional) | boolean| This is optional and if omitted, it takes the value as false and inserts to the right of column at cursor position. -count(optional) | number | This is optional and if omitted, it takes the value as 1. +left (optional) | boolean | Optional. Defaults to false and inserts to the right of the column at the cursor position. +count (optional) | number | Optional. Defaults to 1. Refer to the following sample code. ```ts -//Insert a column to the right of the column at cursor position. -documentedior.editor.insertColumn(); +// Insert a column to the right of the column at the cursor position. +documenteditor.editor.insertColumn(); -//Insert a column to the left of the column at cursor position. -documentedior.editor.insertColumn(false); +// Insert a column to the left of the column at the cursor position. +documenteditor.editor.insertColumn(true); -//Insert two columns to the left of the column at cursor position. -documentedior.editor.insertColumn(false, 2); +// Insert two columns to the left of the column at the cursor position. +documenteditor.editor.insertColumn(true, 2); ``` ### Select an entire table @@ -106,27 +108,27 @@ documenteditor.selection.selectTable(); ### Select row -You can select the entire row at cursor position by using the following sample code. +You can select the entire row at the cursor position by using the following sample code. ```ts documenteditor.selection.selectRow(); ``` -If current selection spans across cells of different rows, all these rows will be selected. +If the current selection spans cells of different rows, all these rows will be selected. ### Select column -You can select the entire column at cursor position by using the following sample code. +You can select the entire column at the cursor position by using the following sample code. ```ts documenteditor.selection.selectColumn(); ``` -If current selection spans across cells of different columns, all these columns will be selected. +If the current selection spans cells of different columns, all these columns will be selected. ### Select cell -You can select the cell at cursor position by using the following sample code. +You can select the cell at the cursor position by using the following sample code. ```ts documenteditor.selection.selectCell(); @@ -134,7 +136,7 @@ documenteditor.selection.selectCell(); ## Delete table -Document Editor allows you to delete the entire table. You can use the [`deleteTable()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletetable) method of editor instance, if selection is in table. Refer to the following sample code. +Document Editor allows you to delete the entire table. You can use the [`deleteTable()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletetable) method of the editor instance if the selection is in a table. Refer to the following sample code. ```ts documenteditor.editor.deleteTable(); @@ -142,7 +144,7 @@ documenteditor.editor.deleteTable(); ## Delete row -Document Editor allows you to delete the selected number of rows. You can use the [`deleteRow()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deleterow) method of editor instance to delete the selected number of rows, if selection is in table. Refer to the following sample code. +Document Editor allows you to delete the selected number of rows. You can use the [`deleteRow()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deleterow) method of the editor instance to delete the selected number of rows if the selection is in a table. Refer to the following sample code. ```ts documenteditor.editor.deleteRow(); @@ -150,7 +152,7 @@ documenteditor.editor.deleteRow(); ## Delete column -Document Editor allows you to delete the selected number of columns. You can use the [`deleteColumn()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecolumn) method of editor instance to delete the selected number of columns, if selection is in table. Refer to the following sample code. +Document Editor allows you to delete the selected number of columns. You can use the [`deleteColumn()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecolumn) method of the editor instance to delete the selected number of columns if the selection is in a table. Refer to the following sample code. ```ts documenteditor.editor.deleteColumn(); @@ -158,20 +160,21 @@ documenteditor.editor.deleteColumn(); ## Merge cells -You can merge cells vertically, horizontally, or combination of both to a single cell. To vertically merge the cells, the columns within selection should be even in left and right directions. To horizontally merge the cells, the rows within selection should be even in top and bottom direction. +You can merge cells vertically, horizontally, or a combination of both into a single cell. To vertically merge the cells, the columns within the selection should be aligned in the left and right directions. To horizontally merge the cells, the rows within the selection should be aligned in the top and bottom directions. + Refer to the following sample code. ```ts -documenteditor.editor.mergeCells() +documenteditor.editor.mergeCells(); ``` ## Positioning the table -Document Editor preserves the position properties of the table and displays the table based on position properties. It does not support modifying the position properties. Whereas the table will be automatically moved along with text edited if it is positioned relative to the paragraph. +Document Editor preserves the position properties of the table and displays the table based on the position properties. It does not support modifying the position properties. However, the table moves automatically with the surrounding text if it is positioned relative to the paragraph. ## How to work with tables -The following sample demonstrates how to delete the table row or columns, merge cells and how to bind the API with button. +The following sample demonstrates how to delete the table rows or columns, merge cells, and bind the API to a button. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md index 27e144cb31..0f943a5f23 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Text format in JavaScript (ES5) Document Editor control +# Text format in JavaScript (ES5) Document editor control [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports several formatting options for text such as bold, italic, font color, highlight color, and more. This section describes how to modify the formatting for selected text in detail.