diff --git a/Document-Processing/Word/Word-Processor/vue/shapes.md b/Document-Processing/Word/Word-Processor/vue/shapes.md index f8b550e8f8..73dcfbb565 100644 --- a/Document-Processing/Word/Word-Processor/vue/shapes.md +++ b/Document-Processing/Word/Word-Processor/vue/shapes.md @@ -10,25 +10,25 @@ domainurl: ##DomainURL## # Shapes in Vue DOCX Editor -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 5f1d825899..f0fa2e02b2 100644 --- a/Document-Processing/Word/Word-Processor/vue/spell-check.md +++ b/Document-Processing/Word/Word-Processor/vue/spell-check.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Spell Check in Vue DOCX Editor -[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 ead6323410..2a4ef72c62 100644 --- a/Document-Processing/Word/Word-Processor/vue/styles.md +++ b/Document-Processing/Word/Word-Processor/vue/styles.md @@ -10,31 +10,31 @@ domainurl: ##DomainURL## # Styles in Vue DOCX Editor -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 43eef9513c..785c72874f 100644 --- a/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md +++ b/Document-Processing/Word/Word-Processor/vue/supported-fileformats.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Supported File Formats in Vue DOCX 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 93e15ea4bf..71727bd768 100644 --- a/Document-Processing/Word/Word-Processor/vue/table-format.md +++ b/Document-Processing/Word/Word-Processor/vue/table-format.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Table format in Vue DOCX Editor -[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 01c4fae73c..65ec43b365 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. @@ -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)