diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/section-format.md b/Document-Processing/Word/Word-Processor/javascript-es6/section-format.md index cddc840593..afb146c8a3 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/section-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/section-format.md @@ -1,20 +1,20 @@ --- layout: post -title: Section format in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Section format in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Section format in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about Section format in the Syncfusion JavaScript (ES6) Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Section format documentation: ug domainurl: ##DomainURL## --- -# Section format in JavaScript (ES6) Document editor control +# Section format in JavaScript (ES6) Document Editor [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports various section formatting such as page size, page margins, and more. ## Page size -You can get or set the size of a section at cursor position by using the following sample code. +You can get or set the size of a section at the cursor position by using the following sample code. ```ts documenteditor.selection.sectionFormat.pageWidth = 500; @@ -25,7 +25,8 @@ You can change the orientation of the page by swapping the values of page width ## Page margins -Left and right page margin defines the gap between the document content from left and right side of the page respectively. Top and bottom page margins defines the gap between the document content from header and footer of the page respectively. +Left and right page margins define the gap between the document content from the left and right sides of the page respectively. Top and bottom page margins define the gap between the document content from the header and footer of the page respectively. + Refer to the following sample code. ```ts @@ -35,7 +36,7 @@ documenteditor.selection.sectionFormat.bottomMargin = 10; documenteditor.selection.sectionFormat.topMargin = 10; ``` ->Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584. +N> The maximum value of margin is 1584, as per Microsoft Word application, and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then the Syncfusion Document Editor will automatically reset it to 1584. ## Header distance @@ -57,7 +58,7 @@ documenteditor.selection.sectionFormat.footerDistance = 72; You can define the number of columns, column width, and space between columns for the pages in a section. -The following code example illustrates how to define the two columns layout for the pages in a section. +The following code example illustrates how to define the two column layout for the pages in a section. ```ts let column: SelectionColumnFormat = new SelectionColumnFormat(container.documentEditor.selection); @@ -66,19 +67,22 @@ column.space = 36; container.documentEditor.selection.sectionFormat.columns = [column, column]; container.documentEditor.selection.sectionFormat.lineBetweenColumns = true; ``` -### Online Demo + +### Online demo Explore how to format Word documents with multiple columns using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/multiple-columns.html). ## Breaks -You can insert column break. The following code example illustrates how to insert a column break. +You can insert a column break. + +The following code example illustrates how to insert a column break. ```ts container.documentEditor.editor.insertColumnBreak(); ``` -You can insert next page section break to start the new section on the next page. +You can insert a next page section break to start the new section on the next page. The following code example illustrates how to insert a next page section break. @@ -86,7 +90,7 @@ The following code example illustrates how to insert a next page section break. container.documentEditor.editor.insertSectionBreak(SectionBreakType.NewPage); ``` -You can insert continuous section break to start the new section on the same page. +You can insert a continuous section break to start the new section on the same page. The following code example illustrates how to insert a continuous section break. @@ -94,11 +98,11 @@ The following code example illustrates how to insert a continuous section break. container.documentEditor.editor.insertSectionBreak(SectionBreakType.Continuous); ``` -## Online Demo +## Online demo Explore how to apply section formatting in Word documents using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/section-formatting.html). -## See Also +## See also * [Page setup dialog](./dialog#page-setup-dialog) * [Column dialog](./dialog#column-dialog) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/security-advisories.md b/Document-Processing/Word/Word-Processor/javascript-es6/security-advisories.md index 4e36ddb13a..bc5ef1aadc 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/security-advisories.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/security-advisories.md @@ -1,26 +1,26 @@ --- layout: post -title: Security Advisories in JavaScript (ES6) Document Editor control | Syncfusion -description: Learn here all about Security Advisories in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Security Advisories in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about Security Advisories in the Syncfusion JavaScript (ES6) Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Security advisories documentation: ug domainurl: ##DomainURL## --- -# Security Advisories in Syncfusion® EJ2 Controls +# Security Advisories in JavaScript (ES6) Document Editor -Syncfusion® places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion® utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion® packages undergo software composition analysis using the [SOOS](https://soos.io/) security tool. +Syncfusion® places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion® utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion® packages undergo software composition analysis using the SOOS security tool. This document provides a description of the security updates available for Syncfusion® Essential® JS2 controls for volume release. -## Security Updates +## Security updates -The following security updates are available for TypeScript DocumentEditor control and are listed based on the release version. +The following security updates are available for the [TypeScript Document Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) control and are listed based on the release version. ### 2024 Volume 2 (v26.2.4) - July 25, 2024 -This release resolves critical and moderate security vulnerabilities affecting the TypeScript Document Editor Docker Image. +This release resolves critical and moderate security vulnerabilities affecting the JavaScript (ES6) Document Editor Docker Image. **Threat:** @@ -36,12 +36,10 @@ This release resolves critical and moderate security vulnerabilities affecting t * The Npgsql package and Dynamic LINQ have been removed, as they are no longer required, to enhance security and mitigate the risk of SQL injection attacks. -## Common Security Updates - - +## Common security updates For details on common security updates related to Syncfusion® products, please refer to [this link](https://ej2.syncfusion.com/documentation/common/security). This resource provides information on the latest advisories and best practices to help ensure the security and integrity of your applications. -## Security Issue +## Security issue If users discover any security issues or need assistance in resolving them with Syncfusion® controls, please contact us by creating a support ticket on [our support site](https://syncfusion.com/support) or by posting your query on Stack Overflow with the tag `syncfusion-ej2`. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/shapes.md b/Document-Processing/Word/Word-Processor/javascript-es6/shapes.md index 72d4a9445c..d451ccdc78 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/shapes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/shapes.md @@ -1,34 +1,36 @@ --- layout: post -title: Shapes in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Shapes in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Shapes in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about Shapes in Syncfusion JavaScript (ES6) Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Shapes documentation: ug domainurl: ##DomainURL## --- -# Shapes in JavaScript (ES6) Document editor control +# Shapes in JavaScript (ES6) Document Editor -Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, [TypeScript 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 have preset or custom geometry. + +N> At present, the [TypeScript 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. ## 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 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) @@ -38,8 +40,8 @@ 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 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 JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/autoshapes.html). \ No newline at end of file +Explore how to preserve AutoShapes and grouped shapes in Word documents using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/autoshapes.html). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md b/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md index 5a0d08979d..b8d3402d51 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md @@ -1,16 +1,16 @@ --- layout: post -title: Spell check in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Spell check in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Spell check in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about Spell check in Syncfusion JavaScript (ES6) Document Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Spell check documentation: ug domainurl: ##DomainURL## --- -# Spell check in JavaScript (ES6) Document editor control +# Spell check in JavaScript (ES6) Document Editor -[TypeScript 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). +The [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-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. ```ts import { DocumentEditorContainer, Toolbar, SpellChecker } from '@syncfusion/ej2-documenteditor'; @@ -22,58 +22,58 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ container.appendTo('#container'); //Accessing spell checker. let spellChecker: SpellChecker = container.documentEditor.spellChecker; -//Set language id to map dictionary in server side.; +//Set language ID to map dictionary in server side. spellChecker.languageID = 1033; spellChecker.removeUnderline = false; -//Allow suggetion for miss spelled word/ +//Allow suggestion for misspelled word. 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-es6/web-services/core#spell-check) 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-es6/web-services/core#spell-check) link for configuring spell checker in 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. +* Supports context menu suggestions for misspelled words. -## Enable SpellCheck +* Provides built-in options such as Ignore, Ignore All, Change, and Change All for misspelled words in the spell check dialog. -To enable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings. +## Enable spell check -## Disable SpellCheck +To enable spell check in the Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings. -To disable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/documentation/api/document-editor#enablespellcheck) property initialization code. The default value of this property is false. +## Disable spell check + +To disable spell check in the Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/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/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/documentation/api/document-editor/spellChecker#removeunderline) API and now, the squiggly lines will never be rendered for misspelled words. ```ts documentEditor.spellChecker.removeUnderline = false; ``` -### AllowSpellCheckAndSuggestion +### Allow suggestions -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/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check. +By default, on performing spell check in the Document Editor, both spelling and suggestions for the misspelled words are retrieved, and misspelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check. ```ts documentEditor.spellChecker.allowSpellCheckAndSuggestion = false; ``` -### LanguageID +### Language configuration -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/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 to use that language for spell checking in the Document Editor, it must be matched with the [`languageID`](https://ej2.syncfusion.com/documentation/api/document-editor/spellChecker#languageid) you pass in the Document Editor. ```ts -documentEditor.spellChecker.languageID = 1033; //LCID of "en-us"; +documentEditor.spellChecker.languageID = 1033; //LCID of "en-us" ``` -### EnableOptimizedSpellCheck +### Optimized spell check -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 the 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. @@ -81,11 +81,11 @@ The following code example illustrates how to enable optimized spell checking. documentEditor.spellChecker.enableOptimizedSpellCheck = true; ``` -### Spell check dictionary cache +### 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`, we have optimized the performance and memory usage of the spell checker 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 by using the `InitializeDictionaries` method as in the below example. ```c# List spellDictCollection = new List(); @@ -96,7 +96,7 @@ By default, the spell checker holds only one language dictionary in memory. If y 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, then we should use the default constructor of the `SpellChecker` to check spelling and get suggestions as in the below example code; it will prevent reinitialization of already loaded dictionaries. ```c# public string SpellCheck([FromBody] SpellCheckJsonData spellChecker) @@ -113,16 +113,13 @@ 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 would be parsed to generate suggestions for misspelled words. Starting from `v20.1.0.xx`, the `.aff` and dictionary data are parsed only for the first time alone while calling `SpellChecker.GetSuggestion()` method. -### Add new root word and possible words to dictionary +### Add new word 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 any root word missing in the dictionary file, then 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> 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. @@ -134,30 +131,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 a misspelled word to open the context menu with spell check options. Please see the below screenshot for your reference. ![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. +Context menu shows the suggestions for misspelled words. By clicking on the required word from the suggestions, the misspelled 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 so that the spell checker does not consider that 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 an error, use the Ignore Once or Ignore All options. -Ignore: ignore only the current occurrence of a word from error. +**Ignore Once:** Ignores only the current occurrence of a word from error. -Ignore All: ignore all occurrence of a word from error in the entire document. +**Ignore All:** Ignores all occurrences of a word from error 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 below screenshot for your reference. ![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-es6/web-services/core#spell-check) link for configuring spell checker in server-side. +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/web-services/core#spell-check) link for configuring the spell checker in server-side. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/styles.md b/Document-Processing/Word/Word-Processor/javascript-es6/styles.md index 40d1f51d20..a3a73b13c0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/styles.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/styles.md @@ -1,40 +1,40 @@ --- layout: post -title: Styles in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Styles in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Styles in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about Styles in Syncfusion JavaScript (ES6) Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Styles documentation: ug domainurl: ##DomainURL## --- -# Styles in JavaScript (ES6) Document editor control +# Styles in JavaScript (ES6) Document Editor -Styles are useful for applying a set of formatting consistently throughout the document. In [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (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 [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (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. -* **paragraphFormat**: Specifies the properties of paragraph style. +* **characterFormat**: Specifies the properties of paragraph and character styles. +* **paragraphFormat**: Specifies the properties of paragraph and character styles. * **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 @@ -54,13 +54,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: @@ -69,7 +69,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 @@ -160,13 +160,13 @@ 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 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 editor.editorModule.applyStyle('New Linked'); @@ -174,22 +174,22 @@ editor.editorModule.applyStyle('New Linked'); editor.editorModule.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. ```ts //Get paragraph styles let paragraphStyles = documentEditor.getStyles('Paragraph'); //Get character styles -let paragraphStyles = documentEditor.getStyles('Character'); +let 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/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 [`createStyle`](https://ej2.syncfusion.com/documentation/api/document-editor/editor#createStyle) method. If `modifyExistingStyle` parameter is set to `true`, the style properties are updated to the existing style. -The following illustrate to modify an existing style. +The following example illustrates how to modify an existing style. ```ts let styleJson: any = { @@ -203,10 +203,12 @@ let styleJson: any = { 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. +N> If `modifyExistingStyle` parameter is set to `true` and a style already exists with the same name, it modifies the specified properties in the existing style. -## Online Demo +N> If `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 newly created style will not have the specified name. + +N> If no style exists with the same name, it creates a new style. + +## Online demo Explore how to apply and modify styles in Word documents using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/styles.html). \ No newline at end of file