Skip to content

1046613 - Improve the JavaScript ES5 UG documentation using AI Prompt - Phase 8 #4388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kalaivannan-Ganesan wants to merge 3 commits into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1046613 - Improve the JavaScript ES5 UG documentation using AI Prompt - Phase 8 #4388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c82bcc5
Resolved from table-of-contents.md to text-format.md
Kalaivannan-Ganesan Aug 13, 2026
a2f486f
Resolved the errors from the text-format.md to track-changes.md
Kalaivannan-Ganesan Aug 14, 2026
145766a
Modified contents for table.md and text-format.md
Kalaivannan-Ganesan Aug 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -48,33 +47,33 @@ 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

var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: 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

Expand Down
83 changes: 43 additions & 40 deletions Document-Processing/Word/Word-Processor/javascript-es5/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,34 @@ 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.

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.
Expand All @@ -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
Expand All @@ -106,72 +108,73 @@ 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();
```

## 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();
```

## 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();
```

## 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();
```

## 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" %}
Expand Down
Loading