From 30753daeb5fbc7798cde52d0cdaabd5d7dc1222d Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Mon, 27 Jul 2026 17:41:38 +0530 Subject: [PATCH] 1043289-changed table-format,content,table,format,wrapping stye --- .../Word-Processor/angular/table-format.md | 32 ++++++++-------- .../angular/table-of-contents.md | 16 ++++---- .../Word/Word-Processor/angular/table.md | 38 +++++++++---------- .../Word-Processor/angular/text-format.md | 36 +++++++++--------- .../angular/text-wrapping-style.md | 24 ++++++------ 5 files changed, 73 insertions(+), 73 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/table-format.md b/Document-Processing/Word/Word-Processor/angular/table-format.md index 4ef7e0efb4..fea357c3dc 100644 --- a/Document-Processing/Word/Word-Processor/angular/table-format.md +++ b/Document-Processing/Word/Word-Processor/angular/table-format.md @@ -1,16 +1,16 @@ --- layout: post -title: Table format in Angular Document editor component | Syncfusion -description: Learn here all about Table format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Table format in Angular DOCX Editor component | Syncfusion +description: Learn here all about Table format in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Table format documentation: ug domainurl: ##DomainURL## --- -# Table format in Angular Document editor component +# Table format in Angular Document Editor component -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) customizes the formatting of table, or table cells such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these formatting for selected cells, rows, or table in detail. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) customizes the formatting of a table or table cells such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these formatting for selected cells, rows, or a table in detail. ## Cell margins @@ -27,7 +27,7 @@ this.documentEditor.selection.cellFormat.topMargin=5.4; this.documentEditor.selection.cellFormat.bottomMargin=5.4; ``` -You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from default cells margin of the table. Refer to the following sample code. +You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from the default cell margins of the table. Refer to the following sample code. ```typescript //To change the left margin @@ -72,18 +72,18 @@ this.documentEditor.selection.cellFormat.verticalAlignment='Bottom'; ## Table alignment -The tables are aligned in document editor to ‘Left’, ‘Right’, or ‘Center’. Refer to the following sample code. +The tables are aligned in the document editor to ‘Left’, ‘Right’, or ‘Center’. Refer to the following sample code. ```typescript -this.documentEditor.selection.tableFormat.tableAlignment=’Center’; +this.documentEditor.selection.tableFormat.tableAlignment='Center'; ``` ## Cell width -Set the desired width of table cells that will be considered when the table is layouted. Refer to the following sample code. +Set the desired width of table cells that will be considered when the table is laid out. Refer to the following sample code. ```typescript -this.documentEditor.selection.cellFormat.preferredWidthType=’Point’; +this.documentEditor.selection.cellFormat.preferredWidthType='Point'; this.documentEditor.selection.cellFormat.preferredWidth=100; ``` @@ -110,7 +110,7 @@ Document Editor exposes API to customize the borders for table cells by specifyi this.documentEditor.editor.applyBorders(borderSettings); ``` -Please check below gif which illustrates how to apply border for selected cells through properties pane options - border color, line size and no border: +Please check the below gif which illustrates how to apply a border for selected cells through properties pane options - border color, line size and no border: ![ApplyBorderToSelectedCell_viaPropertiesPane](images/ApplyBorderToSelectedCell_viaPropertiesPane.gif) @@ -129,7 +129,7 @@ this.documentEditor.selection.rowFormat.height=20; ### Header row -The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is at first row of the table, then you can define whether it as header row or not, using the following sample code. +The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is at the first row of the table, then you can define whether it is a header row or not, using the following sample code. ```typescript this.documentEditor.selection.rowFormat.isHeader=true; @@ -137,7 +137,7 @@ this.documentEditor.selection.rowFormat.isHeader=true; ### Allow row break across pages -This property is valid if a table row does not fit in the current page during table layout. It defines whether a table row can be allowed to break. If the value is false, the entire row will be moved to the start of next page. You can modify this property for selected rows using the following sample code. +This property is valid if a table row does not fit in the current page during table layout. It defines whether a table row can be allowed to break. If the value is false, the entire row will be moved to the start of the next page. You can modify this property for selected rows using the following sample code. ```typescript this.documentEditor.selection.rowFormat.allowRowBreakAcrossPages=false; @@ -145,18 +145,18 @@ this.documentEditor.selection.rowFormat.allowRowBreakAcrossPages=false; ### Title -Document Editor expose API to get or set the table title of the selected table. Refer to the following sample code to set title. +Document Editor exposes API to get or set the table title of the selected table. Refer to the following sample code to set title. ```typescript -this.documenteditor.selection.tableFormat.title = 'Shipping Details'; +this.documentEditor.selection.tableFormat.title = 'Shipping Details'; ``` ### Description -Document Editor expose API to get or set the table description of the selected image. Refer to the following sample code to set description. +Document Editor exposes API to get or set the table description of the selected table. Refer to the following sample code to set description. ```typescript -this.documenteditor.selection.tableFormat.description = 'Freight cost and shipping details'; +this.documentEditor.selection.tableFormat.description = 'Freight cost and shipping details'; ``` ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/angular/table-of-contents.md b/Document-Processing/Word/Word-Processor/angular/table-of-contents.md index 05f9bdfd18..fff5485d1f 100644 --- a/Document-Processing/Word/Word-Processor/angular/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/angular/table-of-contents.md @@ -1,7 +1,7 @@ --- layout: post -title: Table of contents in Angular Document editor component | Syncfusion -description: Learn here all about Table of contents in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Table of contents in Angular DOCX Editor component | Syncfusion +description: Learn here all about Table of contents in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Table of contents documentation: ug @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Table of contents in Angular Document editor component -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 -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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. [`TableOfContentsSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/tableOfContentsSettings) contain the following properties: * **startLevel**: Specifies the start level for constructing table of contents. @@ -25,7 +25,7 @@ The table of contents in a document is same as the list of chapters at the begin * **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 the document editor. ```typescript let tocSettings: TableOfContentsSettings = @@ -49,11 +49,11 @@ this.documentEditor.editor.insertTableOfContents(tocSettings); ## Update or edit 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 shown by right-clicking 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. @@ -67,7 +67,7 @@ You can also do it programmatically by using the exposed API. Refer to the follo ``` ->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> 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. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/angular/table.md b/Document-Processing/Word/Word-Processor/angular/table.md index af50ee4fcd..39f973bd89 100644 --- a/Document-Processing/Word/Word-Processor/angular/table.md +++ b/Document-Processing/Word/Word-Processor/angular/table.md @@ -1,20 +1,20 @@ --- layout: post -title: Table in Angular Document editor component | Syncfusion -description: Learn here all about Table in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Table in Angular DOCX Editor component | Syncfusion +description: Learn here all about Table in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Table documentation: ug domainurl: ##DomainURL## --- -# Table in Angular Document editor component +# Table in Angular Document Editor component -Tables are an efficient way to present information. [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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. [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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. ## 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. @@ -37,11 +37,11 @@ export class AppComponent { } ``` -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) ->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. +N> 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 @@ -60,11 +60,11 @@ export class AppComponent { } ``` -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 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 @@ -81,9 +81,9 @@ Refer to the following sample code. //Inserts a row below the row at cursor position this.documentEditor.editor.insertRow(); //Inserts a row above the row at cursor position -this.documentEditor.editor.insertRow(false); +this.documentEditor.editor.insertRow(true); //Inserts three rows below the row at cursor position -this.documentEditor.editor.insertRow(true, 3); +this.documentEditor.editor.insertRow(false, 3); ``` ## Insert columns @@ -101,9 +101,9 @@ Refer to the following sample code. //Insert a column to the right of the column at cursor position. this.documentEditor.editor.insertColumn(); //Insert a column to the left of the column at cursor position. -this.documentEditor.editor.insertColumn(false); +this.documentEditor.editor.insertColumn(true); //Insert two columns to the left of the column at cursor position. -this.documentEditor.editor.insertColumn(false, 2); +this.documentEditor.editor.insertColumn(true, 2); ``` ### Select an entire table @@ -122,7 +122,7 @@ You can select the entire row at cursor position by using the following sample c this.documentEditor.selection.selectRow(); ``` -If current selection spans across cells of different rows, all these rows will be selected. +If the current selection spans across cells of different rows, all these rows will be selected. ### Select column @@ -132,7 +132,7 @@ You can select the entire column at cursor position by using the following sampl this.documentEditor.selection.selectColumn(); ``` -If current selection spans across cells of different columns, all these columns will be selected. +If the current selection spans across cells of different columns, all these columns will be selected. ### Select cell @@ -168,11 +168,11 @@ this.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 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. Refer to the following sample code. ```typescript -this.documentEditor.editor.mergeCells() +this.documentEditor.editor.mergeCells(); ``` ## Positioning the table diff --git a/Document-Processing/Word/Word-Processor/angular/text-format.md b/Document-Processing/Word/Word-Processor/angular/text-format.md index dd1dbaf9ca..eb03004cee 100644 --- a/Document-Processing/Word/Word-Processor/angular/text-format.md +++ b/Document-Processing/Word/Word-Processor/angular/text-format.md @@ -1,20 +1,20 @@ --- layout: post -title: Text format in Angular Document editor component | Syncfusion -description: Learn here all about Text format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Text format in Angular DOCX Editor component | Syncfusion +description: Learn here all about Text format in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Text format documentation: ug domainurl: ##DomainURL## --- -# Text format in Angular Document editor component +# Text format in Angular Document Editor component -[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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. +[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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. ## 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. ```typescript @@ -25,7 +25,7 @@ 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. ```typescript documenteditor.editor.toggleBold(); @@ -33,7 +33,7 @@ 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. ```typescript //Gets the value for italic formatting of selected text. @@ -42,7 +42,7 @@ let italic : boolean = documenteditor.selection.characterFormat.italic; documenteditor.selection.characterFormat.italic= true|false; ``` -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. ```typescript documenteditor.editor.toggleItalic(); @@ -50,7 +50,7 @@ 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. ```typescript //Gets the value for underline formatting of selected text. @@ -59,7 +59,7 @@ let underline : Underline = documenteditor.selection.characterFormat.underline; documenteditor.selection.characterFormat.underline='Single' | 'None'; ``` -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. ```typescript documenteditor.editor.toggleUnderline('Single'); @@ -67,7 +67,7 @@ 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. ```typescript //Gets the value for strikethrough formatting of selected text. @@ -76,7 +76,7 @@ let strikethrough : Strikethrough = documenteditor.selection.characterFormat.str documenteditor.selection.characterFormat.strikethrough='Single' | 'Normal'; ``` -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. ```typescript documenteditor.editor.toggleStrikethrough(); @@ -132,7 +132,7 @@ documenteditor.editor.changeCase('Uppercase'|'Lowercase'|'SentenceCase'|'ToggleC ## 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. ```typescript //Gets the value for fontSize formatting of selected text. @@ -150,13 +150,13 @@ 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. ```typescript //Gets the value for fontColor formatting of selected text. @@ -168,18 +168,18 @@ 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. ```typescript //Gets the value for fontFamily formatting of selected text. let baselineAlignment : string = documenteditor.selection.characterFormat.fontFamily; //Sets fontFamily formatting for selected text. -documenteditor.selection.characterFormat.fontFamily= 'Arial'; +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. ```typescript //Gets the value for highlightColor formatting of selected text. diff --git a/Document-Processing/Word/Word-Processor/angular/text-wrapping-style.md b/Document-Processing/Word/Word-Processor/angular/text-wrapping-style.md index b85b9ba801..2476d6eec8 100644 --- a/Document-Processing/Word/Word-Processor/angular/text-wrapping-style.md +++ b/Document-Processing/Word/Word-Processor/angular/text-wrapping-style.md @@ -1,36 +1,36 @@ --- layout: post -title: Text wrapping style in Angular Document editor component | Syncfusion -description: Learn here all about Text wrapping style in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. +title: Text wrapping style in Angular DOCX Editor component | Syncfusion +description: Learn here all about Text wrapping style in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Text wrapping style documentation: ug domainurl: ##DomainURL## --- -# Text wrapping style in Angular Document editor component +# Text wrapping style in Angular Document Editor component -Text wrapping refers to how images and shapes are fit with surrounding text in a document. Currently, [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) has only preservation support for image and textbox shape with below wrapping styles. +Text wrapping refers to how images and shapes are placed within the surrounding text in a document. Currently, [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-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 surrounded by 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) ## 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 overlay an image over text or to add a shape to highlight a part in a paragraph. ![view of image with in front of text wrapping style in DocumentEditor](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) @@ -40,12 +40,12 @@ In this option, the image or shape is placed behind the text. This can be used w ![view of image with behind wrapping style in DocumentEditor](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 text 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 Document Editor which is supported from v19.2.0.x. +N> Tight and Through styles will be preserved as the square wrapping style in the Document Editor, which is supported from v19.2.0.x. ![view of shape with square wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/square-textwrapping.PNG)