From 352127641087207a6b1ab63de45ae55ef4caf1d3 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Fri, 14 Aug 2026 00:33:13 +0530 Subject: [PATCH 1/3] Addressed feedbacks from shapes.md to table.md --- .../Word-Processor/javascript-es5/shapes.md | 22 ++-- .../javascript-es5/spell-check.md | 79 +++++++------ .../Word-Processor/javascript-es5/styles.md | 104 +++++++++--------- .../javascript-es5/supported-fileformats.md | 14 +-- .../Word-Processor/javascript-es5/table.md | 83 +++++++------- 5 files changed, 152 insertions(+), 150 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md b/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md index a5409b7b79..8a9aa961cc 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md @@ -3,34 +3,34 @@ layout: post title: Shapes in JavaScript (ES5) Document editor control | Syncfusion description: Learn here all about Shapes in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Shapes +control: Shapes documentation: ug domainurl: ##DomainURL## --- # Shapes in JavaScript (ES5) Document editor control -Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly. +Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. They can be preset or custom geometry. At present, [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) does not have support to insert shapes. However, if the imported document contains shapes, they are preserved within the editor. ## Supported shapes -The DocumentEditor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes,Flowchart and Stars and Banners. +The Document Editor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes, Flowchart, and Stars and Banners. -![List of supported shapes in DocumentEditor](images/Shapes_images/supported_shapes.png) +![List of supported shapes in Document Editor](images/Shapes_images/supported_shapes.png) ->Note: When using ASP.NET MVC service, the unsupported shapes will be converted as image and preserved as image. +N> When using ASP.NET MVC service, the unsupported shapes are converted to images and preserved as images. -## Text box Shape +## Text Box Shape -A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor will display indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting. +A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor appears, indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting. -![Text box shape view in DocumentEditor](images/Shapes_images/textbox_shape.png) +![Text box shape view in Document Editor](images/Shapes_images/textbox_shape.png) ## Shape Resizer -The DocumentEditor also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions. +The Document Editor also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions. -![Shape resizer view in DocumentEditor](images/Shapes_images/shape_resizer.png) +![Shape resizer view in Document Editor](images/Shapes_images/shape_resizer.png) ## Text wrapping style @@ -38,7 +38,7 @@ Text wrapping refers to how shapes fit with surrounding text in a document. Plea ## Positioning the shape -DocumentEditor preserves the position properties of the shape and displays the shape based on position properties. It does not support modifying the position properties. Whereas the shape will be automatically moved along with text edited if it is positioned relative to the line or paragraph. +Document Editor preserves the position properties of the shape and displays the shape based on position properties. It does not support modifying the position properties. However, the shape moves automatically with the surrounding text if it is positioned relative to the line or paragraph. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md b/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md index d0f783509e..2c7d9f31f7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Spell check in JavaScript (ES5) Document editor control -[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor's spell checker is compatible with [hunspell dictionary files](https://github.com/wooorm/dictionaries). +[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor. It provides suggestions for misspelled words through a dialog and the context menu. Document Editor's spell checker is compatible with [hunspell dictionary files](https://github.com/wooorm/dictionaries). ```ts import { DocumentEditorContainer, Toolbar, SpellChecker } from '@syncfusion/ej2-documenteditor'; @@ -20,36 +20,35 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, enableSpellCheck: true }); container.appendTo('#container'); -//Accessing spell checker. +// Accessing spell checker. let spellChecker: SpellChecker = container.documentEditor.spellChecker; -//Set language id to map dictionary in server side.; +// Set language ID to map the dictionary on the server side. spellChecker.languageID = 1033; spellChecker.removeUnderline = false; -//Allow suggetion for miss spelled word/ +// Allow suggestion for misspelled words. spellChecker.allowSpellCheckAndSuggestion = true; ``` ->Note: Document Editor requires server-side dependencies for spell check configuration. -Refer to the [Document Editor Web API service projects](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](./web-services-overview). +N> Document Editor requires server-side dependencies for spell check configuration. Refer to the [Document Editor Web API service projects](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core) link for configuring spell checker on the server side. To know about server-side dependencies, please refer to this [page](./web-services-overview). ## Features * Supports context menu suggestions. -* Provides built-in options to Ignore, Ignore All, Change, Change All for error words in spell checker dialog. +* Provides built-in options to Ignore, Ignore All, Change, Change All for error words in the spell checker dialog. ## Enable SpellCheck -To enable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings. +To enable spell check in Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings. ## Disable SpellCheck -To disable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property initialization code. The default value of this property is false. +To disable spell check in Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property initialization code. The default value of this property is false. ## Spell check settings ### Remove Underline -By default, mis-spelled words are marked with squiggly line. You can also disable this behavior by enabling the [`removeUnderline`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#removeunderline) API and now, the squiggly lines will never be rendered for mis-spelled words. +By default, misspelled words are marked with a squiggly line. You can also disable this behavior by enabling the [`removeUnderline`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#removeunderline) API, and the squiggly lines will no longer be rendered for misspelled words. ```ts documentEditor.spellChecker.removeUnderline = false; @@ -57,7 +56,7 @@ documentEditor.spellChecker.removeUnderline = false; ### AllowSpellCheckAndSuggestion -By default, on performing spell check in Document Editor, both spelling and suggestions of the mis-spelled words will be retrieved, and this mis-spelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check. +By default, on performing spell check in Document Editor, both spelling and suggestions of the misspelled words are retrieved, and these misspelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which performs only spell check. ```ts documentEditor.spellChecker.allowSpellCheckAndSuggestion = false; @@ -65,15 +64,15 @@ documentEditor.spellChecker.allowSpellCheckAndSuggestion = false; ### LanguageID -Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) in the server-side and to use that language for spell checking in Document Editor, it must be matched with [`languageID`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#languageid) you pass in the Document Editor. +Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) on the server side. To use that language for spell checking in Document Editor, it must match the [`languageID`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#languageid) you set in the Document Editor. ```ts -documentEditor.spellChecker.languageID = 1033; //LCID of "en-us"; +documentEditor.spellChecker.languageID = 1033; // LCID of "en-us". ``` ### EnableOptimizedSpellCheck -Document Editor provides option to spellcheck page by page when loading the documents. The default value of this property is false, so when opening the document spellcheck web API will be called for each word in the document. To optimize the frequency of spellcheck web API calls, you can enable this property. +Document Editor provides an option to spell check page by page when loading documents. The default value of this property is false, so when opening the document, the spell check web API is called for each word in the document. To optimize the frequency of spell check web API calls, you can enable this property. The following code example illustrates how to enable optimized spell checking. @@ -83,26 +82,27 @@ documentEditor.spellChecker.enableOptimizedSpellCheck = true; ### Spell check dictionary cache -Starting from `v20.1.0.xx`, we have optimized the performance and memory usage of spell checker by adding a static method to initialize the dictionaries with specified cache count. +Starting from `v20.1.0.xx`, the performance and memory usage of the spell checker have been optimized by adding a static method to initialize the dictionaries with a specified cache count. -By default, the spell checker holds only one language dictionary in memory. If you want to hold multiple dictionaries in memory, you need to set the cache limit by using `InitializeDictionaries` method as in the below example. +By default, the spell checker holds only one language dictionary in memory. If you want to hold multiple dictionaries in memory, you need to set the cache limit using the `InitializeDictionaries` method as in the below example. ```c# - List spellDictCollection = new List(); - string personalDictPath = string.Empty; - int cacheCount = 2; +List spellDictCollection = new List(); +string personalDictPath = string.Empty; +int cacheCount = 2; - // Initialize dictionaries - SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount); +// Initialize dictionaries +SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount); ``` -If dictionaries are initialized using `InitializeDictionaries` method, then we should use default constructor of the `SpellChecker`to check spelling and get suggestion as in the below example code, it will prevent reinitialization of already loaded dictionaries. +If dictionaries are initialized using the `InitializeDictionaries` method, you should use the default constructor of the `SpellChecker` to check spelling and get suggestions, as in the code example below; this prevents reinitialization of already loaded dictionaries. ```c# public string SpellCheck([FromBody] SpellCheckJsonData spellChecker) { - try { - SpellChecker spellCheck = new SpellChecker(); + try + { + SpellChecker spellCheck = new SpellChecker(); spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord); return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck); } @@ -113,16 +113,15 @@ public string SpellCheck([FromBody] SpellCheckJsonData spellChecker) } ``` -Previously on every `SpellChecker.GetSuggestion()` method call, the `.aff` and dictionary data will be parsed to generate suggestion for miss spelled word. But, starting from `v20.1.0.xx`, the `.aff` and dictionary data will be parsed only for the first time alone while calling `SpellChecker.GetSuggestion()` method. +Previously, on every `SpellChecker.GetSuggestion()` method call, the `.aff` and dictionary data were parsed to generate suggestions for misspelled words. Starting from `v20.1.0.xx`, the `.aff` and dictionary data are parsed only on the first call to the `SpellChecker.GetSuggestion()` method. ### Add new root word and possible words to dictionary -If you find any root word is missing in the dictionary file, then you can add that new root word and the rule to form the possible words to dictionary file using `AddNewWord` API in the server-side Spell check library. +If you find that a root word is missing in the dictionary file, you can add that new root word and the rule to form the possible words to the dictionary file using the `AddNewWord` API in the server-side Spell check library. ->Note: ->1. The rules are framed automatically using the root word, the possible words and affix file. ->2. If you pass null for the parameters `affPath` and `possibleWords`, then it will add a single root word to dictionary. ->3. This API is included starting from `v20.2.0.xx`. +N> 1. The rules are framed automatically using the root word, the possible words, and the affix file. +N> 2. If you pass null for the parameters `affPath` and `possibleWords`, only a single root word is added to the dictionary. +N> 3. This API is included starting from `v20.2.0.xx`. The following code example demonstrates how to add a new root word to the dictionary along with the rule to form the possible words. @@ -134,30 +133,30 @@ spellChecker.AddNewWord("en.dic","en.aff", "construct", new string[] { "construc ## Context menu -Right click on error word to open the context menu with spell check options. Please see below screenshot for your reference. +Right-click on an incorrect word to open the context menu with spell check options. Please see the screenshot below for your reference. -![Spell check option in JavaScript document editor context menu](images/spell-check-menu.png) +![Spell check option in JavaScript Document Editor context menu](images/spell-check-menu.png) ### Suggestions -Context menu shows the suggestions for mis-spelled words. By clicking on the required word from suggestion, the error word gets replaced automatically. +The context menu shows suggestions for misspelled words. Click a suggestion to replace the word automatically. ### Add To Dictionary -Using this option, you can add the current word to the dictionary. So that the spell checker does not consider that word as error in future. +Using this option, you can add the current word to the dictionary so that the spell checker no longer flags it as an error. ### Ignore Once and Ignore All -If you do not wish to add the word to dictionary and do not want to show error, use Ignore Once or Ignore All options. +If you do not want to add the word to the dictionary and do not want to show the error, use the Ignore Once or Ignore All options. -Ignore: ignore only the current occurrence of a word from error. +Ignore: ignores only the current occurrence of the word. -Ignore All: ignore all occurrence of a word from error in the entire document. +Ignore All: ignores all occurrences of the word in the entire document. ### Spelling -Using this option, you can open spell check dialog. Please see below screenshot for your reference. +Using this option, you can open the spell check dialog. Please see the screenshot below for your reference. -![Spell check dialog in JavaScript document editor](images/spell-check-dialog.png) +![Spell check dialog in JavaScript Document Editor](images/spell-check-dialog.png) -* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core#spell-check) link for configuring spell checker in server-side. +N> Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core#spell-check) link for configuring spell checker on the server side. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/styles.md b/Document-Processing/Word/Word-Processor/javascript-es5/styles.md index 417dea7b62..af04f93839 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/styles.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/styles.md @@ -14,7 +14,7 @@ Styles are useful for applying a set of formatting consistently throughout the d ## Styles definition overview -A Style in Document Editor should have the following properties: +A style in Document Editor should have the following properties: * **name**: Name of the style. All styles in a document have a unique name, which is used as an identifier when applying the style. * **type**: Specifies the document elements that the style will target. For example, paragraph or character. @@ -24,17 +24,17 @@ A Style in Document Editor should have the following properties: * **paragraphFormat**: Specifies the properties of paragraph style. * **basedOn**: Specifies that the current style inherits the style set to this property. This is how hierarchical styles are defined. It can be optional. -> The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style. +N> The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style. ## Default style -The default style for span and paragraph properties is normal. It internally inherits the default style of the document loaded or Document Editor component. +The default style for span and paragraph properties is Normal. It internally inherits the default style of the loaded document or the Document Editor component. ## Style hierarchy -Each style initially checks its local value for the property that is being evaluated and turns to the style it is based on. If no local value is found, it turns to its default style. +Each style initially checks its local value for the property that is being evaluated, and falls back to the style it is based on. If no local value is found, it falls back to its default style. -Style inheritance of different styles are listed as follows: +Style inheritance of different styles is listed as follows: ### Character style @@ -54,7 +54,7 @@ When a paragraph style is based on a linked style, the inheritance of the proper ### Linked style -Linked styles are composite styles and their components are paragraph and character styles with link between them. To apply paragraph properties, take the properties from the linked paragraph style. Similarly, to apply character properties, take the properties from linked character style. Linked styles are based on other linked styles or on paragraph styles. +Linked styles are composite styles and their components are paragraph and character styles with a link between them. To apply paragraph properties, take the properties from the linked paragraph style. Similarly, to apply character properties, take the properties from the linked character style. Linked styles are based on other linked styles or on paragraph styles. When a linked style is based on a paragraph style, the hierarchy of the properties is as follows: @@ -68,7 +68,7 @@ When a linked style is based on another linked style, the hierarchy of the prope ## Defining new styles -New Styles are defined and added to the style collection of the document. In this way, they will be discovered by the default UI and applied to the parts of a document. +New styles are defined and added to the style collection of the document. In this way, they will be discovered by the default UI and applied to document content. ### Defining a character style @@ -76,7 +76,7 @@ The following example shows how to programmatically create a character style. ```javascript -//Initialize Document Editor component. +// Initialize Document Editor component. var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true }); // Create custom style object. @@ -94,7 +94,7 @@ var styleJson = { } }; -//Created new style using `createStyle` method. +// Created new style using `createStyle` method. documentEditor.editor.createStyle(JSON.stringify(styleJson)); ``` @@ -104,7 +104,7 @@ The following example shows how to programmatically create a paragraph style. ```javascript -//Initialize Document Editor component. +// Initialize Document Editor component. var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true }); // Create custom style object. @@ -133,82 +133,82 @@ var styleJson = { } }; -//Created new style using `createStyle` method. +// Created new style using `createStyle` method. documentEditor.editor.createStyle(JSON.stringify(styleJson)); ``` ### Defining a linked style -The following example shows how to programmatically create linked style. +The following example shows how to programmatically create a linked style. ```javascript -//Initialize Document Editor component. -var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true,isReadOnly: false, enableSelection: true }); +// Initialize Document Editor component. +var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true }); // Create custom style object. var styleJson = { -    "type": "Paragraph", -    "name": "New Linked", -    "basedOn": "Normal", -    "next": "Normal", -    "link": "New Linked Char", -    "characterFormat": { -        "fontSize": 16.0, -        "fontFamily": "Calibri Light", -        "fontColor": "#2F5496" -    }, -    "paragraphFormat": { -        "leftIndent": 0.0, -        "rightIndent": 0.0, -        "firstLineIndent": 0.0, -        "beforeSpacing": 12.0, -        "afterSpacing": 0.0, -        "lineSpacing": 1.0791666507720947, -        "lineSpacingType": "Multiple", -        "textAlignment": "Left", -        "outlineLevel": "Level1" -    } + "type": "Paragraph", + "name": "New Linked", + "basedOn": "Normal", + "next": "Normal", + "link": "New Linked Char", + "characterFormat": { + "fontSize": 16.0, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496" + }, + "paragraphFormat": { + "leftIndent": 0.0, + "rightIndent": 0.0, + "firstLineIndent": 0.0, + "beforeSpacing": 12.0, + "afterSpacing": 0.0, + "lineSpacing": 1.0791666507720947, + "lineSpacingType": "Multiple", + "textAlignment": "Left", + "outlineLevel": "Level1" + } }; -//Created new style using `createStyle` method. +// Created new style using `createStyle` method. documentEditor.editor.createStyle(JSON.stringify(styleJson)); ``` ## Applying a style -The styles are applied using the **applyStyle** method of **editorModule**, the parameter should be passed is the **Name** of the Style. +The styles are applied using the **applyStyle** method of **editorModule**; the parameter to pass is the **Name** of the style. -The styles of the **Character** type is applied to the currently selected part of the document. If there is no selection, the values that will be applied to the word at caret position. The styles of **Paragraph** type follow the same logic and are applied to all paragraphs in the selection or the current paragraph. +The styles of the **Character** type are applied to the currently selected part of the document. If there is no selection, the values are applied to the word at the caret position. The styles of **Paragraph** type follow the same logic and are applied to all paragraphs in the selection or the current paragraph. -When there is no selection, styles of **Linked** type will change the values of the paragraph, and apply both the Paragraph and Character properties. When there is selection, Linked Style changes only the character properties of the selected text. +When there is no selection, styles of the **Linked** type change the values of the paragraph and apply both the Paragraph and Character properties. When there is a selection, the Linked style changes only the character properties of the selected text. -For example, the following line will apply the "New Linked" to the current paragraph. +For example, the following line applies the "New Linked" style to the current paragraph. ```javascript -//Apply specified style for selected paragraph. +// Apply the specified style to the selected paragraph. editor.editorModule.applyStyle('New Linked'); -//Clear direct formatting and apply the specified style +// Clear direct formatting and apply the specified style. editor.editorModule.applyStyle('New Linked', true); ``` ## Get Styles -You can get the styles in the document using the below code snippet. +You can get the styles in the document using the following code snippet. ```js -//Get paragraph styles +// Get paragraph styles var paragraphStyles = documentEditor.getStyles('Paragraph'); -//Get character styles -var paragraphStyles = documentEditor.getStyles('Character'); +// Get character styles +var characterStyles = documentEditor.getStyles('Character'); ``` ## Modify an existing style -You can modify a existing style with the specified style properties using [`createStyle`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#createStyle) method. If modifyExistingStyle parameter is set to `true` the style properties is updated to the existing style. +You can modify an existing style with the specified style properties using the [`createStyle`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#createStyle) method. If the `modifyExistingStyle` parameter is set to `true`, the style properties are updated in the existing style. -The following illustrate to modify an existing style. +The following illustrates how to modify an existing style. ```js var styleJson = { @@ -219,12 +219,12 @@ var styleJson = { "fontFamily": "Calibri" } }; -documentEditor.editor.createStyle(styleName, true); +documentEditor.editor.createStyle(JSON.stringify(styleJson), true); ``` -> If modifyExistingStyle parameter is set to true and a style already exists with same name, it modifies the specified properties in the existing style. -> If modifyExistingStyle parameter is set to false and a style already exists with same name, it creates a new style with unique name by appending ‘_1’. Hence, the newly style will not have the specified name. -> If no style exists with same name, it creates a new style. +N> 1. If the `modifyExistingStyle` parameter is set to `true` and a style already exists with the same name, it modifies the specified properties in the existing style. +N> 2. If the `modifyExistingStyle` parameter is set to `false` and a style already exists with the same name, it creates a new style with a unique name by appending `_1`. Hence, the new style will not have the specified name. +N> 3. If no style exists with the same name, it creates a new style. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/supported-fileformats.md b/Document-Processing/Word/Word-Processor/javascript-es5/supported-fileformats.md index f51da23bb0..6dd167d54a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/supported-fileformats.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/supported-fileformats.md @@ -14,7 +14,7 @@ JavaScript (ES5) DOCX Editor (Document Editor) supports a wide range of Microsof ## Supported File Formats -The following table describes supported formats and their conversion capabilities in the Document Editor. +The following table describes the supported formats and their conversion capabilities in the Document Editor. | File Format | Open | Export | |--------------------------------------|--------|--------| @@ -32,12 +32,12 @@ The following table describes supported formats and their conversion capabilitie N> * Requires server-side interactions for the operations. -## Supported platforms for server-side dependencies +## Supported Platforms for Server-Side Dependencies -You can deploy web APIs for the server-side dependencies of the Document Editor component on the following platforms. +You can deploy the Document Editor's server-side web APIs on the following platforms. -- [ASP.NET Core](./web-services/core) -- [ASP.NET MVC](./web-services/mvc) -- [Java](./web-services/java) +- [ASP.NET Core](./web-services/core) +- [ASP.NET MVC](./web-services/mvc) +- [Java](./web-services/java) -To know more about server-side dependencies, refer to this [page](./web-services-overview). \ No newline at end of file +To know more about server-side dependencies, refer to the [server-side dependencies overview](./web-services-overview). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table.md b/Document-Processing/Word/Word-Processor/javascript-es5/table.md index 643634ecd5..c4d07b0882 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 how to bind the API to a button. {% tabs %} {% highlight js tabtitle="index.js" %} From 1f5b165d95a95b654dcba17973cf552ed680f7a0 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Sun, 16 Aug 2026 14:09:53 +0530 Subject: [PATCH 2/3] Resolved the CI failures --- .../Word/Word-Processor/javascript-es5/shapes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md b/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md index 8a9aa961cc..1f75541999 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/shapes.md @@ -42,4 +42,4 @@ Document Editor preserves the position properties of the shape and displays the ## Online Demo -Explore how to preserve auto shapes and grouped shapes 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/autoshapes.html). +Explore how to preserve autoshapes and grouped shapes 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/autoshapes.html). From fea6e56e7532f5fe3dd4c85ef6cf0ed3f4339c19 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Sun, 16 Aug 2026 18:21:47 +0530 Subject: [PATCH 3/3] Reveted table.md and added for table-format.md --- .../javascript-es5/table-format.md | 22 ++--- .../Word-Processor/javascript-es5/table.md | 83 +++++++++---------- 2 files changed, 51 insertions(+), 54 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md index 7460879a9a..4490380975 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Table format in JavaScript (ES5) Document editor control -[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document 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. +[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) customizes the formatting of a table, or its cells, such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these options for selected cells, rows, or the table in detail. ## Cell margins @@ -27,7 +27,7 @@ documenteditor.selection.cellFormat.topMargin = 5.4; 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 a specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from the default cell margin of the table. Refer to the following sample code. ```js //To change the left margin @@ -72,7 +72,7 @@ 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. +Tables are aligned in the Document Editor to 'Left', 'Right', or 'Center'. Refer to the following sample code. ```js documenteditor.selection.tableFormat.tableAlignment = 'Center'; @@ -80,7 +80,7 @@ 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. ```js @@ -101,7 +101,7 @@ documenteditor.selection.cellFormat.preferredWidth = 100; ## Table width -You can set the desired width of a table in ‘Point ‘or ‘Percent’ type. Refer to the following sample code. +You can set the desired width of a table in either `Point` or `Percent` type. Refer to the following sample code. ```js var documenteditor = new ej.documenteditor.DocumentEditor({ @@ -120,7 +120,7 @@ documenteditor.selection.tableFormat.preferredWidth = 300; ## Apply borders -Document Editor exposes API to customize the borders for table cells by specifying the settings. Refer to the following sample code. +Document Editor exposes an API to customize the borders for table cells by specifying the settings. Refer to the following sample code. ```js @@ -142,7 +142,7 @@ 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 GIF below that illustrates how to apply borders to selected cells through the properties-pane options—border color, line size, and the option to remove borders: ![Apply border to selected cell via properties Pane in Javascript document editor](images/ApplyBorderToSelectedCell_viaPropertiesPane.gif) @@ -173,7 +173,7 @@ 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, you can define whether it is a header row or not, using the following sample code. ```js documenteditor.selection.rowFormat.isHeader = true; @@ -181,7 +181,7 @@ 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 on the current page during table layout. It defines whether a table row is 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. ```js documenteditor.selection.rowFormat.allowRowBreakAcrossPages = false; @@ -189,7 +189,7 @@ 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 an API to get or set the table title of the selected table. Refer to the following sample code to set the title. ```js documenteditor.selection.tableFormat.title = 'Shipping Details'; @@ -197,7 +197,7 @@ 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 an API to get or set the table description of the selected table. Refer to the following sample code to set the description. ```js documenteditor.selection.tableFormat.description = 'Freight cost and shipping details'; diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table.md b/Document-Processing/Word/Word-Processor/javascript-es5/table.md index c4d07b0882..643634ecd5 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table.md @@ -10,18 +10,17 @@ 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 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 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 the cursor position by specifying the required number of rows and columns. +You can create and insert a table at 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. @@ -29,15 +28,14 @@ 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 follows: - -![Row Limit Alert](images/Row_Limit_Alert.PNG) +When the maximum row limit is reached, an alert will appear, as follow -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. +![Row Limit Alert](images/Row_Limit_Alert.PNG) +>Note: The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property. ## Set the maximum number of Columns when inserting a table You can use the [maximumColumns](https://ej2.syncfusion.com/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. @@ -48,54 +46,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 follows: +When the maximum column limit is reached, an alert will appear, as follow -![Column Limit Alert](images/Column_Limit_Alert.PNG) +![Column Limit Alert](images/Column_Limit_Alert.PNG) -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. +>Note: The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property. ## Insert rows -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: +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: Parameter | Type | Description ----------|------|------------- -above (optional) | boolean | Optional. Defaults to false and inserts below the row at the cursor position. -count (optional) | number | Optional. Defaults to 1. +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. Refer to the following sample code. ```ts -// Inserts a row below the row at the cursor position. -documenteditor.editor.insertRow(); +//Inserts a row below the row at cursor position +documentedior.editor.insertRow(); -// Inserts a row above the row at the cursor position. -documenteditor.editor.insertRow(true); +//Inserts a row above the row at cursor position +documentedior.editor.insertRow(false); -// Inserts three rows above the row at the cursor position. -documenteditor.editor.insertRow(true, 3); +//Inserts three rows below the row at cursor position +documentedior.editor.insertRow(true, 3) ``` ## Insert columns -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: +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: Parameter | Type | Description ----------|------|------------- -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. +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. Refer to the following sample code. ```ts -// Insert a column to the right of the column at the cursor position. -documenteditor.editor.insertColumn(); +//Insert a column to the right of the column at cursor position. +documentedior.editor.insertColumn(); -// Insert a column to the left of the column at the cursor position. -documenteditor.editor.insertColumn(true); +//Insert a column to the left of the column at cursor position. +documentedior.editor.insertColumn(false); -// Insert two columns to the left of the column at the cursor position. -documenteditor.editor.insertColumn(true, 2); +//Insert two columns to the left of the column at cursor position. +documentedior.editor.insertColumn(false, 2); ``` ### Select an entire table @@ -108,27 +106,27 @@ documenteditor.selection.selectTable(); ### Select row -You can select the entire row at the cursor position by using the following sample code. +You can select the entire row at cursor position by using the following sample code. ```ts documenteditor.selection.selectRow(); ``` -If the current selection spans cells of different rows, all these rows will be selected. +If current selection spans across cells of different rows, all these rows will be selected. ### Select column -You can select the entire column at the cursor position by using the following sample code. +You can select the entire column at cursor position by using the following sample code. ```ts documenteditor.selection.selectColumn(); ``` -If the current selection spans cells of different columns, all these columns will be selected. +If current selection spans across cells of different columns, all these columns will be selected. ### Select cell -You can select the cell at the cursor position by using the following sample code. +You can select the cell at cursor position by using the following sample code. ```ts documenteditor.selection.selectCell(); @@ -136,7 +134,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 the editor instance if the selection is in a 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 editor instance, if selection is in table. Refer to the following sample code. ```ts documenteditor.editor.deleteTable(); @@ -144,7 +142,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 the editor instance to delete the selected number of rows if the selection is in a 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 editor instance to delete the selected number of rows, if selection is in table. Refer to the following sample code. ```ts documenteditor.editor.deleteRow(); @@ -152,7 +150,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 the editor instance to delete the selected number of columns if the selection is in a 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 editor instance to delete the selected number of columns, if selection is in table. Refer to the following sample code. ```ts documenteditor.editor.deleteColumn(); @@ -160,21 +158,20 @@ documenteditor.editor.deleteColumn(); ## Merge cells -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. - +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. 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 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. +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. ## How to work with tables -The following sample demonstrates how to delete the table rows or columns, merge cells, and how to bind the API to a button. +The following sample demonstrates how to delete the table row or columns, merge cells and how to bind the API with button. {% tabs %} {% highlight js tabtitle="index.js" %}