diff --git a/Document-Processing/Word/Word-Processor/react/how-to/hide-tool-bar-and-properties-pane.md b/Document-Processing/Word/Word-Processor/react/how-to/hide-tool-bar-and-properties-pane.md index a1b34c85e4..9d39102e51 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/hide-tool-bar-and-properties-pane.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/hide-tool-bar-and-properties-pane.md @@ -1,22 +1,22 @@ --- layout: post -title: Hide tool bar and properties pane in React Document editor component | Syncfusion -description: Learn here all about Hide tool bar and properties pane in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Hide tool bar and properties pane +title: Hide toolbar and properties pane in React DOCX Editor | Syncfusion +description: Learn here all about Hide toolbar and properties pane in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Hide toolbar and properties pane platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Hide tool bar and properties pane in React Document editor component +# Hide toolbar and properties pane in React Document Editor component -**Document editor container** provides the main document view area along with the built-in toolbar and properties pane. +**Document Editor Container** provides the main document view area along with the built-in toolbar and properties pane. -**Document editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application. +**Document Editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application. ## Hide the properties pane -By default, Document editor container has built-in properties pane which contains options for formatting text, table, image and header and footer. You can use [`showPropertiesPane`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#showpropertiespane) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel/) to hide the properties pane. +By default, Document Editor Container has built-in properties pane which contains options for formatting text, tables, images, headers, and footers. You can use [`showPropertiesPane`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#showpropertiespane) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel) to hide the properties pane. The following example code illustrates how to hide the properties pane. @@ -44,13 +44,13 @@ ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. ->Note: Positioning and customizing the properties pane in Document editor container is not possible. Instead, you can hide the exiting properties pane and create your own pane using public API's. +N> Positioning and customizing the properties pane in the Document Editor Container is not possible. Instead, you can hide the existing properties pane and create your own pane using public APIs. ## Hide the toolbar -You can use [`enableToolbar`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#enabletoolbar) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel/) to hide the existing toolbar. +You can use [`enableToolbar`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#enabletoolbar) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel) to hide the existing toolbar. The following example code illustrates how to hide the existing toolbar. @@ -70,12 +70,12 @@ function App() { /> ); } -export default App +export default App; ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. ## See Also diff --git a/Document-Processing/Word/Word-Processor/react/how-to/insert-page-number-and-navigate-to-page.md b/Document-Processing/Word/Word-Processor/react/how-to/insert-page-number-and-navigate-to-page.md index a88fd51083..45b625e8e7 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/insert-page-number-and-navigate-to-page.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/insert-page-number-and-navigate-to-page.md @@ -1,22 +1,22 @@ --- layout: post -title: Insert page number and navigate in React Document editor | Syncfusion -description: Learn here all about Insert page number and navigate to page in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Insert page number and navigate to page +title: Insert page number and navigate in React DOCX Editor | Syncfusion +description: Learn here all about Insert page number and navigate to page in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Insert page number and navigate to page platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Insert page number and navigate to page in React Document editor component +# Insert page number and navigate in React Document Editor -You can insert page number and navigate to specific page in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component by following ways. +You can insert page number and navigate to specific page in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component using the following ways. ## Insert page number -You can use [`insertPageNumber`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, Page number will insert in Arabic number style. You can change it, by providing the number style in parameter. +You can use [`insertPageNumber`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, the page number will be inserted in Arabic number style. You can change it by providing the number style in parameter. ->Note: Currently, Document Editor have options to insert page number at current cursor position. +N> Currently, Document Editor has options to insert page number at the current cursor position. The following example code illustrates how to insert page number in header. @@ -57,9 +57,9 @@ export default App; ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -Also, you use [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) API in Editor module to insert the Page number in current position +You can also use [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) API in Editor module to insert the page number in the current position. ```ts //Current page number @@ -68,9 +68,9 @@ this.container.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1'); ## Get page count -You can use [`pageCount`](https://ej2.syncfusion.com/react/documentation/api/document-editor#pagecount) API to gets the total number of pages in Document. +You can use [`pageCount`](https://ej2.syncfusion.com/react/documentation/api/document-editor#pagecount) API to get the total number of pages in the Document. -The following example code illustrates how to get the number of pages in Document. +The following example code illustrates how to get the number of pages in the Document. ```ts import * as ReactDOM from 'react-dom'; @@ -107,7 +107,7 @@ ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. ## Navigate to specific page @@ -149,4 +149,4 @@ export default App; ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. \ No newline at end of file +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/how-to/insert-text-in-current-position.md b/Document-Processing/Word/Word-Processor/react/how-to/insert-text-in-current-position.md index ecd8c3210b..633c84117b 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/insert-text-in-current-position.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/insert-text-in-current-position.md @@ -1,22 +1,22 @@ --- layout: post -title: Insert text in current position in React Document editor | Syncfusion -description: Learn here all about Insert text in current position in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Insert text in current position +title: Insert text in current position in React DOCX Editor | Syncfusion +description: Learn here all about Insert text in current position in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Insert text in current position platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Insert text in current position in React Document editor component +# Insert text in current position in React Document Editor component -You can insert the text, paragraph and rich-text content in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component. +You can insert text, paragraphs, and rich-text content in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component. ## Insert text in current cursor position You can use [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API in editor module to insert the text in current cursor position. -The following example code illustrates how to add the text in current selection. +The following example code illustrates how to add the text at the current cursor position. ```ts import * as ReactDOM from 'react-dom'; @@ -28,14 +28,14 @@ import { DocumentEditorContainerComponent.Inject(Toolbar); export class Default extends React.Component { - inserText() { + insertText() { // It will insert the provided text in current selection this.container.documentEditor.editor.insertText('Syncfusion'); } render() { return (
- , document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -Please check below gif which illustrates how to insert text in current cursor position on button click: +Please refer to the gif below which illustrates how to insert text in the current cursor position on button click: -![Insert text in current cursor position in Javascript document editor](../images/insert_text.gif) +![Insert text in current cursor position in JavaScript Document Editor](../images/insert_text.gif) ## Insert paragraph in current cursor position -To insert new paragraph at current selection, you can can use [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API with parameter as `\r\n` or `\n`. +To insert a new paragraph at the current selection, you can use [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API with parameter as `\r\n` or `\n`. -The following example code illustrates how to add the new paragraph in current selection. +The following example code illustrates how to add the new paragraph in the current selection. ```ts // It will add the new paragraph in current selection @@ -73,11 +73,11 @@ this.container.documentEditor.editor.insertText('\n'); ## Insert the rich-text content -To insert the HTML content, you have to convert the HTML content to SFDT Format using [`web service`](../web-services-overview). Then use [`paste`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#paste) API to insert the sfdt at current cursor position. +To insert the HTML content, you have to convert the HTML content to SFDT format using [`web service`](../web-services-overview). Then use [`paste`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#paste) API to insert the SFDT at the current cursor position. ->Note: Html string should be well formatted html. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) support only well formatted XHTML. +N> The HTML string should be well-formatted HTML. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) supports only well-formatted XHTML. -The following example illustrates how to insert the HTML content at current cursor position. +The following example illustrates how to insert the HTML content at the current cursor position. * Send the HTML content to server side for SFDT conversion. Refer to the following example to send the HTML content to server side and inserting it in current cursor position. @@ -93,7 +93,7 @@ DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container; - function inserText() { + function insertText() { let htmltags = "

The img element

Lamp Image"; let http = new XMLHttpRequest(); @@ -117,7 +117,7 @@ function App() { return (
- , document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. * Please refer the following code example for server-side web implementation for HTML conversion using DocumentEditor. @@ -158,4 +158,4 @@ public class InputParameter } ``` ->Note: The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT. \ No newline at end of file +N> The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/react/how-to/insert-text-or-image-in-table-programmatically.md index 86ded67934..2556b9aac4 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/insert-text-or-image-in-table-programmatically.md @@ -1,21 +1,20 @@ --- layout: post -title: Insert text or image in table programmatically in React Document editor component | Syncfusion -description: Learn here all about Insert text or image in table programmatically in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Insert text or image in table programmatically +title: Insert text or image in a table in React DOCX Editor | Syncfusion +description: Learn here all about Insert text or image in table programmatically in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Insert text or image in table programmatically platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Insert text or image in table programmatically in React Document editor component +# Insert text or image in a table in React Document Editor -Using [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) API's, you can insert [`text`](../how-to/insert-text-in-current-position#insert-text-in-current-cursor-position) or [`image`](../image#images) in [`table`](../table#create-a-table) programmatically based on your requirement. -[`text`](../how-to/insert-text-in-current-position) +Using [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) APIs, you can insert [`text`](../how-to/insert-text-in-current-position#insert-text-in-current-cursor-position) or [`image`](../image#images) in a [`table`](../table#create-a-table) programmatically based on your requirement. -Use [`selection`](../how-to/move-selection-to-specific-position#selects-content-based-on-start-and-end-hierarchical-index) API's to navigate between rows and cells. +Use [`selection`](../how-to/move-selection-to-specific-position#selects-content-based-on-start-and-end-hierarchical-index) APIs to navigate between rows and cells. -The following example illustrates how to create 2*2 table and then add text and image programmatically. +The following example illustrates how to create a 2×2 table and then add text and image programmatically. ```ts import * as ReactDOM from 'react-dom'; @@ -29,25 +28,25 @@ DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container: DocumentEditorContainerComponent; function onCreated() { - // To insert the table in cursor position + // To insert the table in the cursor position container.documentEditor.editor.insertTable(2, 2); - // To insert the image at table first cell + // To insert the image at the first cell of the table container.documentEditor.editor.insertImage( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' ); // To move the cursor to next cell moveCursorToNextCell(); - // To insert the image at table second cell + // To insert the image at the second cell of the table container.documentEditor.editor.insertImage( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' ); // To move the cursor to next row moveCursorToNextRow(); - // To insert text in cursor position + // To insert text in the cursor position container.documentEditor.editor.insertText('Text'); // To move the cursor to next cell moveCursorToNextCell(); - // To insert text in cursor position + // To insert text in the cursor position container.documentEditor.editor.insertText('Text'); } function moveCursorToNextCell() { @@ -92,7 +91,7 @@ export default App; ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -The output will be like below. +The output will be as shown below. ![Insert text or image in table programmatically](../images/table-image.png) diff --git a/Document-Processing/Word/Word-Processor/react/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/react/how-to/move-selection-to-specific-position.md index 95518e11dd..9b31501d9f 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/move-selection-to-specific-position.md @@ -1,33 +1,33 @@ --- layout: post -title: Move selection to position in React Document editor | Syncfusion -description: Learn here all about Move selection to specific position in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Move selection to specific position +title: Move selection to position in React DOCX Editor | Syncfusion +description: Learn here all about Move selection to specific position in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. +control: Move selection to specific position platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Move selection to specific position in React Document editor component +# Move selection to specific position in React Document Editor component -Using [`select`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#select) API in selection module, You can set cursor position to anywhere in the document. +Using [`select`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#select) API in selection module, you can set the cursor position anywhere in the document. -## Selects content based on start and end hierarchical index +## Select content based on start and end hierarchical index -Hierarchical index will be in below format. +The hierarchical index will be in the format below. `sectionIndex;blockIndex;offset` -The following code snippet illustrate how to select using hierarchical index. +The following code snippet illustrates how to select using hierarchical index. ```ts // Selection will occur between provided start and end offset container.documentEditor.editor.insertText("Welcome"); -// The below code will select the letters “We” from inserted text “Welcome” +// The following code will select the letters "We" from inserted text "Welcome" container.documentEditor.selection.select("0;0;0", "0;0;2"); ``` -The following table illustrates about Hierarchical index in detail. +The following table illustrates the hierarchical index in detail. | Element |Hierarchical Format | Explanation | |-----------------|-------------|----| @@ -38,10 +38,10 @@ The following table illustrates about Hierarchical index in detail. ## Get the selection start and end hierarchical index -Using [`startOffset`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#startoffset), you can get start hierarchical index which denotes the start index of current selection. -Similarly, using [`endOffset`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#endoffset), you can get end hierarchical index which denotes the end index of current selection. +Using [`startOffset`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#startoffset), you can get the start hierarchical index, which denotes the start index of the current selection. +Similarly, using [`endOffset`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#endoffset), you can get the end hierarchical index, which denotes the end index of the current selection. -The following code snippet illustrate how to get the selection start and end offset on selection changes in document. +The following code snippet illustrates how to get the selection start and end offset on selection changes in document. ```ts import * as ReactDOM from 'react-dom'; @@ -79,17 +79,17 @@ export default App; ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -Document editor have [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/document-editor#selectionchange) event which is triggered whenever the selection changes in Document. +Document Editor has [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/document-editor#selectionchange) event which is triggered whenever the selection changes in the document. -## Selects the content based on left and top position +## Select the content based on left and top positions -Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selectionSettings/) to select the content based on left and top position. +Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selectionSettings) to select the content based on left and top positions. -x denotes the left position and y denotes the top position and extend denotes whether to extend or update selection. +x denotes the left position, y denotes the top position, and extend denotes whether to extend or update the selection. -Please check below code sample for reference. +Please refer to the code sample below for reference. ```ts container.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true });