From 0025b069beb3afe97656a27cd672535be85eca93 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 11 Aug 2026 20:07:04 +0530 Subject: [PATCH 1/5] 1046847-changed shapes,spell-check,styles,supported-fileformats,table-format,table-of-contents files --- .../Word/Word-Processor/vue/shapes.md | 24 ++++---- .../Word/Word-Processor/vue/spell-check.md | 51 ++++++++--------- .../Word/Word-Processor/vue/styles.md | 55 +++++++++---------- .../vue/supported-fileformats.md | 16 +++--- .../Word/Word-Processor/vue/table-format.md | 46 ++++++++-------- .../Word-Processor/vue/table-of-contents.md | 10 ++-- 6 files changed, 98 insertions(+), 104 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/vue/shapes.md b/Document-Processing/Word/Word-Processor/vue/shapes.md index 87b4c7fb64..ed1f8379dc 100644 --- a/Document-Processing/Word/Word-Processor/vue/shapes.md +++ b/Document-Processing/Word/Word-Processor/vue/shapes.md @@ -1,34 +1,34 @@ --- layout: post -title: Shapes in Vue Document editor component | Syncfusion -description: Learn here all about Shapes in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Shapes in Vue DOCX Editor component | Syncfusion +description: Learn here all about Shapes in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. control: Shapes platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Shapes in Vue Document editor component +# Shapes in Vue Document Editor component -Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. +Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. They can have preset or custom geometry. ->Note: At present, [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-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. +N> At present, [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-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. ## Supported shapes -The DocumentEditor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes,Flowchart and Stars and Banners. +The DocumentEditor 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) ->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 will be converted to an image and preserved as an image. -## 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. ![Text box shape view in DocumentEditor](images/Shapes_images/textbox_shape.png) -## Shape Resizer +## Shape resizer 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. @@ -40,8 +40,8 @@ Text wrapping refers to how shapes fit with surrounding text in a document. Plea ## Positioning the shape -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. 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 will be automatically moved along with the edited text if it is positioned relative to the line or paragraph. -## Online Demo +## Online demo -Explore how to preserve auto shapes and grouped shapes in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/autoshapes.html). +Explore how to preserve AutoShapes and grouped shapes in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/autoshapes). diff --git a/Document-Processing/Word/Word-Processor/vue/spell-check.md b/Document-Processing/Word/Word-Processor/vue/spell-check.md index c984368b15..f0b7515df7 100644 --- a/Document-Processing/Word/Word-Processor/vue/spell-check.md +++ b/Document-Processing/Word/Word-Processor/vue/spell-check.md @@ -1,16 +1,16 @@ --- layout: post -title: Spell check in Vue Document editor component | Syncfusion -description: Learn here all about Spell check in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Spell check in Vue DOCX Editor component | Syncfusion +description: Learn here all about Spell check in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. control: Spell check platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Spell check in Vue Document editor component +# Spell check in Vue Document Editor component -[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-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). +[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) supports spell checking for document content. It identifies misspelled words and provides suggestions through a dialog and the context menu. The spell checker is compatible with [Hunspell](https://github.com/wooorm/dictionaries) dictionary files. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -75,21 +75,21 @@ export default { ## 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 spell check dialog. -## Enable SpellCheck +## Enable spellCheck To enable spell check in Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings. -## Disable SpellCheck +## Disable spellCheck To disable spell check in Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#enablespellcheck) property initialization code. The default value of this property is false. ## Spell check settings -### Remove Underline +### 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/vue/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. This behavior can be disabled by setting the [`removeUnderline`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/spellChecker#removeunderline) API to true, which prevents squiggly lines from being rendered for misspelled words. ```ts this.$refs.documenteditor.ej2Instances.spellChecker.removeUnderline = false; @@ -97,7 +97,7 @@ this.$refs.documenteditor.ej2Instances.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/vue/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 will be retrieved, and these misspelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check. ```ts this.$refs.documenteditor.ej2Instances.spellChecker.allowSpellCheckAndSuggestion = false; @@ -105,7 +105,7 @@ this.$refs.documenteditor.ej2Instances.spellChecker.allowSpellCheckAndSuggestion ### 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/vue/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, and the language used for spell checking in Document Editor must match the [`languageID`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/spellChecker#languageid) specified in the Document Editor. ```ts this.$refs.documenteditor.ej2Instances.spellChecker.languageID = 1033 //LCID of "en-us"; @@ -113,7 +113,7 @@ this.$refs.documenteditor.ej2Instances.spellChecker.languageID = 1033 //LCID of ### 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 perform 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 will be 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. @@ -135,7 +135,7 @@ int cacheCount = 2; 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 `InitializeDictionaries` method, then we should use the default constructor of the `SpellChecker` to check spelling and get suggestions as in the below example code. This will prevent reinitialization of already loaded dictionaries. ```c# public string SpellCheck([FromBody] SpellCheckJsonData spellChecker) @@ -153,28 +153,25 @@ 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 will be parsed to generate suggestions for misspelled words. However, 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. ### 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. ->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> The rules are framed automatically using the root word, the possible words and affix file. If you pass null for the parameters `affPath` and `possibleWords`, then it will add a single root word to the dictionary. 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. ```c# SpellChecker spellChecker = new SpellChecker(); // Adds the specified new root word to the dictionary along with the rule to form the possible words. -spellChecker.AddNewWord("en.dic","en.aff", "construct", new string[] { "constructs", "reconstruct", "constructed", "constructive" }); +spellChecker.AddNewWord("en.dic", "en.aff", "construct", new string[] { "constructs", "reconstruct", "constructed", "constructive" }); ``` ## 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 a misspelled word to open the context menu with spell check options. See the screenshot below for reference. ![Spell check option in context menu](images/spell-check-menu.png) @@ -182,22 +179,22 @@ Right click on error word to open the context menu with spell check options. Ple Context menu shows the suggestions for mis-spelled words. By clicking on the required word from suggestion, the error word gets replaced automatically. -### Add To Dictionary +### 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. As a result, the spell checker will not treat the word as an error in the future. ### 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 wish to add the word to the dictionary and do not want to show the error, use Ignore Once or Ignore All options. -Ignore: ignore only the current occurrence of a word from error. +**Ignore:** Ignores only the current occurrence of a word from the error. -Ignore All: ignore all occurrence of a word from error in the entire document. +**Ignore All:** Ignores all occurrences of a 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 below screenshot for your reference. ![Spell check dialog](images/spell-check-dialog.png) -* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/vue/web-services/core#spell-check) link for configuring spell checker in server-side. \ No newline at end of file +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/vue/web-services/core#spell-check) link for configuring the spell checker on the server side. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/styles.md b/Document-Processing/Word/Word-Processor/vue/styles.md index d07406658c..fd6519b9e9 100644 --- a/Document-Processing/Word/Word-Processor/vue/styles.md +++ b/Document-Processing/Word/Word-Processor/vue/styles.md @@ -1,40 +1,40 @@ --- layout: post -title: Styles in Vue Document editor component | Syncfusion -description: Learn here all about Styles in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Styles in Vue DOCX Editor component | Syncfusion +description: Learn here all about Styles in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. control: Styles platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Styles in Vue Document editor component +# Styles in Vue Document Editor component -Styles are useful for applying a set of formatting consistently throughout the document. In document editor, styles are created and added to a document programmatically or via the built-in Styles dialog. +Styles are useful for applying a set of formatting consistently throughout the document. In the Document Editor, styles are created and added to a document programmatically or via the built-in Styles dialog. ## Styles definition overview -A Style in document editor should have the following properties: +A style in the 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. * **next**: Specifies the style that should be automatically applied to a new paragraph created after the current one. * **link**: Provides a relation between the paragraph and character style. -* **characterFormat**: Specifies the properties of paragraph and character style. +* **characterFormat**: Specifies the properties of paragraph and character styles. * **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 the Normal style. It internally inherits the default style of the document loaded or 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 for different styles is listed as follows: ### Character style @@ -55,13 +55,13 @@ 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 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: -* Paragraph properties are inherited from the ‘basedOn’ paragraph style. -* Character properties are inherited from the ‘basedOn’ paragraph style. +* Paragraph properties are inherited from the 'basedOn' paragraph style. +* Character properties are inherited from the 'basedOn' paragraph style. When a linked style is based on another linked style, the hierarchy of the properties is as follows: @@ -70,7 +70,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 the parts of a document. ## Defining a character style @@ -127,7 +127,7 @@ this.$refs.documenteditor.ej2Instances.editor.createStyle(JSON.stringify(styleJs ## 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. ```ts let styleJson: any = { @@ -158,13 +158,13 @@ this.$refs.documenteditor.ej2Instances.editor.createStyle(JSON.stringify(styleJs ## Applying a style -The styles are applied using the **applyStyle** method of **Editor**, the parameter should be passed is the **Name** of the Style. +The styles are applied using the **applyStyle** method of **editorModule**, the parameter to be passed 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 will be 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 **Linked** type will 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 will apply the "New Linked" style to the current paragraph. ```ts this.$refs.documenteditor.ej2Instances.editor.applyStyle('New Linked'); @@ -172,22 +172,22 @@ this.$refs.documenteditor.ej2Instances.editor.applyStyle('New Linked'); this.$refs.documenteditor.ej2Instances.editor.applyStyle('New Linked', true); ``` -## Get Styles +## 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. ```typescript //Get paragraph styles let paragraphStyles = this.$refs.documenteditor.ej2Instances.documentEditor.getStyles('Paragraph'); //Get character styles -let paragraphStyles = this.$refs.documenteditor.ej2Instances.documentEditor.getStyles('Character'); +let characterStyles = this.$refs.documenteditor.ej2Instances.documentEditor.getStyles('Character'); ``` ## Modify an existing style -You can modify a existing style with the specified style properties using [`createStyle`](https://ej2.syncfusion.com/vue/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/vue/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 example illustrates how to modify an existing style. ```typescript let styleJson: any = { @@ -201,11 +201,8 @@ let styleJson: any = { this.$refs.documenteditor.ej2Instances.documentEditor.editor.createStyle(styleName, 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. -Footer +N> 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. 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. If no style exists with the same name, it creates a new style. -## Online Demo +## Online demo Explore how to apply and modify styles in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/styles.html). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md b/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md index 6a3141db79..4a8e6943c2 100644 --- a/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md +++ b/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Supported File Formats in Vue DOCX Editor +# Supported File Formats in Vue Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats for opening and exporting, with both client-side and server-side capabilities. +[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats. Some operations are handled client-side, while others require server-side processing. -## Supported File Formats +## Supported file formats The following table describes supported formats and their conversion capabilities in the Document Editor. @@ -34,10 +34,10 @@ N> * Requires server-side interactions for the operations. ## 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 Web Services for the server-side dependencies of the Document Editor component 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 +For more information about server-side dependencies, refer to this [page](./web-services-overview). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/table-format.md b/Document-Processing/Word/Word-Processor/vue/table-format.md index 4c4302eb93..df23ab975e 100644 --- a/Document-Processing/Word/Word-Processor/vue/table-format.md +++ b/Document-Processing/Word/Word-Processor/vue/table-format.md @@ -1,16 +1,16 @@ --- layout: post -title: Table format in Vue Document editor component | Syncfusion -description: Learn here all about Table format in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Table format in Vue DOCX Editor component | Syncfusion +description: Learn here all about Table format in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. control: Table format platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Table format in Vue Document editor component +# Table Format in Vue Document Editor component -[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-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. +[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document 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.$refs.documenteditor.ej2Instances.selection.cellFormat.topMargin=5.4; this.$refs.documenteditor.ej2Instances.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. ```ts //To change the left margin @@ -72,18 +72,18 @@ this.$refs.documenteditor.ej2Instances.selection.cellFormat.verticalAlignment='B ## 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. ```ts -this.$refs.documenteditor.ej2Instances.selection.tableFormat.tableAlignment=’Center’; +this.$refs.documenteditor.ej2Instances.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. ```ts -this.$refs.documenteditor.ej2Instances.selection.cellFormat.preferredWidthType=’Point’; +this.$refs.documenteditor.ej2Instances.selection.cellFormat.preferredWidthType='Point'; this.$refs.documenteditor.ej2Instances.selection.cellFormat.preferredWidth=100; ``` @@ -98,7 +98,7 @@ this.$refs.documenteditor.ej2Instances.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 API to customize the borders for table cells by specifying the settings. Refer to the following sample code. ```ts import { BorderSettings } from '@syncfusion/ej2-documenteditor'; @@ -110,15 +110,15 @@ let borderSettings: BorderSettings = { this.$refs.documenteditor.ej2Instances.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) -# Working with row formatting +## Working with row formatting -Document editor allows various row formatting such as height and repeat header. +Document Editor allows various row formatting such as height and repeat header. -## Row height +### Row height You can customize the height of a table row as ‘Auto’, ‘AtLeast’, or ‘Exactly’. Refer to the following sample code. @@ -127,17 +127,17 @@ this.$refs.documenteditor.ej2Instances.selection.rowFormat.heightType='Exactly'; this.$refs.documenteditor.ej2Instances.selection.rowFormat.height=20; ``` -## Header row +### 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. ```ts this.$refs.documenteditor.ej2Instances.selection.rowFormat.isHeader=true; ``` -## Allow row break across pages +### 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. ```ts this.$refs.documenteditor.ej2Instances.selection.rowFormat.allowRowBreakAcrossPages=false; @@ -145,7 +145,7 @@ this.$refs.documenteditor.ej2Instances.selection.rowFormat.allowRowBreakAcrossPa ### 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. ```ts this.$refs.documenteditor.ej2Instances.selection.tableFormat.title = 'Shipping Details'; @@ -153,16 +153,16 @@ this.$refs.documenteditor.ej2Instances.selection.tableFormat.title = 'Shipping D ### 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. ```ts this.$refs.documenteditor.ej2Instances.selection.tableFormat.description = 'Freight cost and shipping details'; ``` -## Online Demo +## Online demo -Explore how to format tables in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/table-formatting.html). +Explore how to format tables in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/table-formatting). -## See Also +## See also * [Table properties dialog](./dialog#table-properties-dialog) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/table-of-contents.md b/Document-Processing/Word/Word-Processor/vue/table-of-contents.md index c2181773e2..c8a8818295 100644 --- a/Document-Processing/Word/Word-Processor/vue/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/vue/table-of-contents.md @@ -1,14 +1,14 @@ --- layout: post -title: Table of contents in Vue Document editor component | Syncfusion -description: Learn here all about Table of contents in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Table of contents in Vue DOCX Editor component | Syncfusion +description: Learn here all about Table of contents in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. control: Table of contents platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Table of contents in Vue Document editor component +# Table of contents in Vue 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. @@ -67,10 +67,10 @@ this.$refs.documenteditor.ej2Instances.editor.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. -## Online Demo +## Online demo Explore how to insert and update table of contents in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/table-of-contents.html). -## See Also +## See also * [Table of contents dialog](./dialog#table-of-contents-dialog) From 7dbd26649c0933d26fbb6b079509498d5dc41241 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 11 Aug 2026 20:56:03 +0530 Subject: [PATCH 2/5] 1046847-resolved trailing slash ci issue --- Document-Processing/Word/Word-Processor/vue/styles.md | 2 +- .../Word/Word-Processor/vue/table-of-contents.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/vue/styles.md b/Document-Processing/Word/Word-Processor/vue/styles.md index fd6519b9e9..0dcff08ee7 100644 --- a/Document-Processing/Word/Word-Processor/vue/styles.md +++ b/Document-Processing/Word/Word-Processor/vue/styles.md @@ -185,7 +185,7 @@ let characterStyles = this.$refs.documenteditor.ej2Instances.documentEditor.getS ## Modify an existing style -You can modify an existing style with the specified style properties using the [`createStyle`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor/#createStyle) method. If the modifyExistingStyle parameter is set to `true`, the style properties are updated in the existing style. +You can modify an existing style with the specified style properties using the [`createStyle`](https://ej2.syncfusion.com/vue/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 example illustrates how to modify an existing style. diff --git a/Document-Processing/Word/Word-Processor/vue/table-of-contents.md b/Document-Processing/Word/Word-Processor/vue/table-of-contents.md index c8a8818295..310686a0e3 100644 --- a/Document-Processing/Word/Word-Processor/vue/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/vue/table-of-contents.md @@ -16,7 +16,7 @@ The table of contents in a document is same as the list of chapters at the begin [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-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. -[`TableOfContentsSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/tableOfContentsSettings/) contain the following properties: +[`TableOfContentsSettings`](https://ej2.syncfusion.com/vue/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. * **includeHyperlink**: Specifies whether the link for headings is included. From 68dd90181aa388d12b8b2cbde4eca364db2b82c3 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Wed, 19 Aug 2026 18:03:44 +0530 Subject: [PATCH 3/5] 1046847-changed DOCX --- .../Word/Word-Processor/vue/supported-fileformats.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md b/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md index 6262e5e9d9..785c72874f 100644 --- a/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md +++ b/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Supported File Formats in Vue Document Editor +# Supported File Formats in Vue DOCX Editor [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats. Some operations are handled client-side, while others require server-side processing. From 2e25b1e36d4c08c960a32b03d70c5b637da437d3 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Fri, 28 Aug 2026 11:52:47 +0530 Subject: [PATCH 4/5] 1046847-resolved ci h1 title issue --- .../Word/Word-Processor/vue/faq/unsupported-file-format.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md b/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md index a8e3369613..77a23d1b63 100644 --- a/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md +++ b/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Supported File Formats in Vue DOCX Editor +# Supported Documents Formats in Vue DOCX Editor If you receive the message "The file format you have selected isn't supported. Please choose a valid format." when opening a document in the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor), it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning: 1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT (Refer to the supported formats list below). From 3456ec3dc7ee35611453eeb0450124e96e962e6b Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Fri, 28 Aug 2026 12:20:37 +0530 Subject: [PATCH 5/5] 1046847-resolved ci description issue in unsupported-file-format.md file --- .../Word/Word-Processor/vue/faq/unsupported-file-format.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md b/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md index 77a23d1b63..27f29e2e5d 100644 --- a/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md +++ b/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md @@ -1,7 +1,7 @@ --- layout: post title: Supported File Formats in Vue DOCX Editor | Syncfusion -description: Learn about the supported file formats in Vue DOCX Editor for importing, and exporting documents. +description: Learn about the supported file formats in Vue DOCX Editor for importing, exporting, and processing documents. control: Unsupported file platform: document-processing documentation: ug