React App

``` -------------------------------- ### Get selection start and end offset Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/move-selection-to-specific-position Retrieve the start and end hierarchical indices of the current selection using the `startOffset` and `endOffset` properties of the selection module. This snippet is part of a React component that listens for selection changes. ```typescript import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container: DocumentEditorContainerComponent; function selectionChanges() { //Get the start index of current selection let startOffset: string = container.documentEditor.selection.startOffset; //Get the end index of current selection let endOffset: string = container.documentEditor.selection.endOffset; } return ( { container = scope; }} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} selectionChange={selectionChanges} /> ); } export default App; ReactDOM.render(, document.getElementById('sample')); ``` -------------------------------- ### Navigate to project directory Source: https://help.syncfusion.com/document-processing/word/word-processor/react/nextjs-getting-started Command to enter the newly created project folder. ```bash cd ej2-nextjs-documenteditor ``` -------------------------------- ### Select and Get Current Paragraph as SFDT Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/get-current-word Use the `selectParagraph` API to select the current paragraph and then access the `text` or `sfdt` properties of the selection to get the content. This example demonstrates inserting text, selecting the paragraph, and retrieving its SFDT representation. ```typescript import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container: DocumentEditorContainerComponent; function onCreated() { // To insert text in cursor position container.documentEditor.editor.insertText('Document editor'); // To select the current paragraph in document container.documentEditor.selection.selectParagraph(); // To get the selected content as text let selectedContentText: string = container.documentEditor.selection.text; // To get the selected content as SFDT (rich text) let selectedContentSFDT: string = container.documentEditor.selection.sfdt; } return ( { container = scope; }} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} created={onCreated} /> ); } export default App; ReactDOM.render(, document.getElementById('sample')); ``` -------------------------------- ### Select and Get Current Word as Plain Text Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/get-current-word Use the `selectCurrentWord` API to highlight the word at the cursor and then the `text` API to retrieve its content as plain text. This example demonstrates inserting text, moving the cursor, selecting the word, and then getting its plain text and SFDT representations. ```typescript import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container: DocumentEditorContainerComponent; function onCreated() { // To insert text in cursor position container.documentEditor.editor.insertText('Document editor'); // Move selection to previous character container.documentEditor.selection.moveToPreviousCharacter(); // To select the current word in document container.documentEditor.selection.selectCurrentWord(); // To get the selected content as text let selectedContentText: string = container.documentEditor.selection.text; // To get the selected content as SFDT (rich text) let selectedContentSFDT: string = container.documentEditor.selection.sfdt; } return ( { container = scope; }} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} created={onCreated} /> ); } export default App ReactDOM.render(, document.getElementById('sample')); ``` -------------------------------- ### Select content using hierarchical index Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/move-selection-to-specific-position Use the `select` method with start and end hierarchical indices to select content. The hierarchical index format is sectionIndex;blockIndex;offset. This example inserts text and then selects the first two characters. ```typescript container.documentEditor.editor.insertText("Welcome"); // The below code will select the letters ‘We’ from inserted text ‘Welcome’ container.documentEditor.selection.select("0;0;0", "0;0;2"); ``` -------------------------------- ### Create a Next.js application Source: https://help.syncfusion.com/document-processing/word/word-processor/react/nextjs-getting-started Commands to initialize a new Next.js project using either NPM or Yarn. ```bash npx create-next-app@latest ``` ```bash yarn create next-app ``` -------------------------------- ### Initialize Document Editor Container in React Source: https://help.syncfusion.com/document-processing/word/word-processor/react/export This snippet shows the basic setup for the DocumentEditorContainerComponent in a React application. It includes importing necessary modules and rendering the component with essential properties like height, serviceUrl, and enableToolbar. The useRef hook is used to get a reference to the component instance for further operations. ```tsx import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { useRef } from 'react'; import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container = useRef(null); function save(){ //Download the document in Dotx format. container.current.documentEditor.save('sample', 'Dotx'); } return (

;

); } export default App; ReactDOM.render(, document.getElementById('sample')); ``` -------------------------------- ### Verify APM Installation Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill Run this command to confirm that the Agent Package Manager (APM) is installed in your environment. This is a prerequisite for installing the React UI Builder Skill. ```bash apm --version ``` -------------------------------- ### Install UI Builder Skill for Codex Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill Use the APM CLI to install the React UI Builder Skill with DOCX Editor for the Codex target. ```bash apm install syncfusion/react-ui-builder -t codex ``` -------------------------------- ### Initialize Google Cloud Storage Client Source: https://help.syncfusion.com/document-processing/word/word-processor/react/saving-documents/google-cloud-storage Initialize the StorageClient in the controller's constructor using service account credentials. Ensure the key file path and bucket name are correctly configured. ```csharp private readonly StorageClient _storageClient; private IConfiguration _configuration; public readonly string _bucketName; public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) { _hostingEnvironment = hostingEnvironment; _cache = cache; // The key file is used to authenticate with Google Cloud Storage. string keyFilePath = "path/to/service-account-key.json"; // Load the service account credentials from the key file. var credentials = GoogleCredential.FromFile(keyFilePath); // Create a storage client with Application Default Credentials _storageClient = StorageClient.Create(credentials); _configuration = configuration; _bucketName = _configuration.GetValue("BucketName"); } ``` -------------------------------- ### Importing local documents in React Source: https://help.syncfusion.com/document-processing/word/word-processor/react/import Use these examples to implement file selection and loading for .sfdt files. Ensure the DocumentEditorComponent is properly referenced to call the open method. ```jsx import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorComponent, } from '@syncfusion/ej2-react-documenteditor'; function App() { let documenteditor; function onImportClick() { //Open file picker. document.getElementById('file_upload').click(); } function onFileChange(e) { if (e.target.files[0]) { //Get selected file. let file = e.target.files[0]; //Open sfdt document. if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') { let fileReader = new FileReader(); fileReader.onload = (e) => { let contents = e.target.result; let proxy = documenteditor; //Open the document in Document Editor. proxy.open(contents); }; //Read the file as text. fileReader.readAsText(file); documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.')); } } } return (

{ documenteditor = scope; }} height={'330px'}/>

); } export default App; ReactDOM.render(, document.getElementById('sample')); ``` ```tsx import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorComponent, DocumentEditor, } from '@syncfusion/ej2-react-documenteditor'; function App() { let documenteditor: DocumentEditorComponent; function onImportClick() { //Open file picker. document.getElementById('file_upload').click(); } function onFileChange(e: any) { if (e.target.files[0]) { //Get selected file. let file = e.target.files[0]; //Open sfdt document. if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') { let fileReader: FileReader = new FileReader(); fileReader.onload = (e: any) => { let contents: string = e.target.result; let proxy: any = documenteditor; //Open the document in Document Editor. proxy.open(contents); }; //Read the file as text. fileReader.readAsText(file); documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.')); } } } return (

{ documenteditor = scope; }} height={'330px'} />

); } export default App; ReactDOM.render(, document.getElementById('sample')); ``` -------------------------------- ### Install Document Editor Package Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started Install the Syncfusion Document Editor React component package using npm. The --save flag adds it to your package.json dependencies. ```bash npm install @syncfusion/ej2-react-documenteditor --save ``` -------------------------------- ### Configure appsettings.json Source: https://help.syncfusion.com/document-processing/word/word-processor/react/saving-documents/google-drive Add Google Drive configuration settings to the web service configuration file. ```json { "Logging": { "LogLevel": { "Default": "Information", "Microsoft.AspNetCore": "Warning" } }, "AllowedHosts": "*", "FolderId": "Your Google Drive Folder ID", "CredentialPath": "Your Path to the OAuth 2.0 Client IDs json file", "ApplicationName": "Your Application name" } ``` -------------------------------- ### Create Azure App Service Plan Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-app-service Create an App Service plan using `az appservice plan create`. This example specifies a Linux container and the S1 pricing tier. ```bash az appservice plan create --name documenteditorappservice --resource-group documenteditorresourcegroup --sku S1 --is-linux ``` -------------------------------- ### Build Docker Image Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service Builds a Docker image for the Word Processor Server application. Replace with your desired image name. ```bash docker build -t ``` -------------------------------- ### Create React App with Vite Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started Use this command to create a new React application with Vite for a faster development environment. ```bash npm create vite@latest my-app ``` -------------------------------- ### Get Header Content as Text in React Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/retrieve-the-bookmark-content-as-text Use `goToHeader` to navigate to the header and then `text` to get its content as plain text. Ensure the `DocumentEditorContainerComponent` is created before calling these APIs. ```typescript import * as ReactDOM from 'react-dom'; import * as React from 'react'; import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { let container: DocumentEditorContainerComponent; function onCreated() { // To navigate the selection to header container.documentEditor.selection.goToHeader(); // To insert text in cursor position container.documentEditor.editor.insertText('Document editor'); // To select all the content in document container.documentEditor.selection.selectAll(); // To get the selected content as text let selectedContent: string = container.documentEditor.selection.text; } return ( { container = scope; }} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} created={onCreated} /> ); } export default App() ReactDOM.render(, document.getElementById('sample')); ``` -------------------------------- ### Get or Set Text Alignment for Paragraphs Source: https://help.syncfusion.com/document-processing/word/word-processor/react/paragraph-format Get or set the text alignment of selected paragraphs using the `textAlignment` property. Supported values are 'Center', 'Left', 'Right', 'Justify'. ```typescript documenteditor.selection.paragraphFormat.textAlignment= 'Center' | 'Left' | 'Right' | 'Justify'; ``` -------------------------------- ### Create Kubernetes Services and Deployments Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service Applies the Kubernetes configuration defined in the 'documenteditor-server.yml' file to create the necessary services and deployments in your AKS cluster. ```bash kubectl create -f ./documenteditor-server.yml ```