Web services in React Document editor component

21 Feb 202411 minutes to read

You can deploy web APIs for server-side dependencies of Document Editor component in the following platforms.

• ASP.NET Core
• ASP.NET MVC
• Java

Which operations require server-side interaction

Operations	When client-server communication will be triggered?	What type of data will be transferred between client and server?
Open file formats other than SFDT	When opening the document other than SFDT (Syncfusion Document Editor’s native file format), the server-side web API is invoked from client-side script.	Client: Sends the input file. Server: Receives the input file and sends the converted SFDT back to the client. The server-side web API internally extracts the content from the document (DOCX, DOC, WordML, RTF, HTML) using Syncfusion Word library (DocIO) and converts it into SFDT for opening the document in Document Editor.
Paste with formatting	When pasting the formatted content (HTML/RTF) received from system clipboard. For converting HTML/RTF to SFDT format. Note: Whereas plain text received from system clipboard will be pasted directly in the client-side.	Client: Sends the input Html or Rtf string. Server: Receives the input Html or Rtf string and sends the converted SFDT back to the client.
Restrict editing	When protecting the document, for generating hash.	Client: Sends the input data for hashing algorithm. Server: Receives the input data for hashing algorithm and sends the result hash information back to the client.
Spellcheck(default)	When the spellchecker is enabled on client-side Document Editor, and it performs the spell check validation for words in the document.	Client: Sends the words (string) with their language for spelling validation. Server: Receives the words (string) with their language for spelling validation and sends the validation result as JSON back to the client.
SpellCheckByPage	Document editor provides options to spellcheck page by page when loading the documents. By enabling optimized spell check in client-side, you can perform spellcheck page by page when loading the documents.	Client: Sends the words (string) with their language for spelling validation. Server: Receives the words (string) with their language for spelling validation and sends the validation result as JSON back to the client.
Save as file formats other than SFDT and DOCX (optional API)	You can configure this API, if you want to save the document in file format other than DOCX and SFDT. For saving the files as WordML, DOC, RTF, HTML, ODT, Text using Syncfusion Word library (DocIO) and PDF using Syncfusion Word (DocIO) and PDF libraries.	You can transfer document from client to server either as SFDT or DOCX format. First option (SFDT): Client: Sends the SFDT. Server: Receives the SFDT and saves the converted document as any file format supported by Syncfusion Word library (DocIO) in server or sends the saved file to the client browser. Second option (DOCX): Client: Sends the DOCX file. Server: Receives the DOCX file and saves the converted document as any file format supported by Syncfusion Word library (DocIO) in server or sends the saved file to the client browser.

Note: If you don’t require the above functionalities then you can deploy as pure client-side component without any server-side interactions.

Please refer the example from GitHub to configure the web service and set the serviceUrl.

If your running web service Url is http://localhost:62869/, set the serviceUrl like below:

this.container.serviceUrl = "http://localhost:62869/api/documenteditor/";

Required Web API structure

Please check below table for expected web API structure.

Expected method name	Parameters	Return type
Import	Files(IFormCollection)	json(sfdt format)
SystemClipboard	CustomerParameter: content(type string either rtf or html) and type(either .rtf or .html)	json(sfdt format)
RestrictEditing	Parameter of type CustomRestrictParameter public class CustomRestrictParameter { public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } }	result hash information
SpellCheck(default)	Parameter: SpellCheckJsonData public class SpellCheckJsonData { public int LanguageID { get; set; } public string TexttoCheck { get; set; } public bool CheckSpelling { get; set; } public bool CheckSuggestion { get; set; } public bool AddWord { get; set; } }	Json type of Spellcheck containing details of spell checked word
SpellCheckByPage	Parameter: SpellCheckJsonData public class SpellCheckJsonData { public int LanguageID { get; set; } public string TexttoCheck { get; set; } public bool CheckSpelling { get; set; } public bool CheckSuggestion { get; set; } public bool AddWord { get; set; } }	Json type of Spellcheck containing details of spell checked word Note: Document editor provides options to spellcheck page by page when loading the documents. By enabling optimized spell check in client-side, you can perform spellcheck page by page when loading the documents.
Save(optional API)	parameter: SaveParameter public class SaveParameter { public string Content { get; set; } public string FileName { get; set; } }	void(Save the file as file stream)
ExportSFDT(optional API)	parameter: SaveParameter public class SaveParameter { public string Content { get; set; } public string FileName { get; set; } }	FileStreamResult (to save the document in client-side)
Export(optional API)	Files(IFormCollection)	FileStreamResult (to save the document in client-side)

Customize the expected method name

Document editor component provides an option to customize the expected method name for Import, SystemClipboard, RestrictEditing and SpellCheck using serverActionSettings.

The following example code illustrates how to customize the method name using serverActionSettings.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container: DocumentEditorContainerComponent;
  // Customize the API name
  let settings = { import: 'Import1', systemClipboard: 'SystemClipboard1', spellCheck: 'SpellCheck1', restrictEditing: 'RestrictEditing1' }

  return (
    <DocumentEditorContainerComponent
      id="container"
      ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      enableToolbar={true}
      serverActionSettings={settings}
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));

Add the custom headers to XMLHttpRequest

Document editor component provides an an option to add custom headers of XMLHttpRequest using the headers.

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;
  // custom headers
  let customHeaders = [{ 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }, { 'Content-Type': 'application/json' }];
  return (
    <DocumentEditorContainerComponent
      id="container"
      ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      enableToolbar={true}
      headers = {customHeaders}
    />
  );
}
export default App
ReactDOM.render(<App />, document.getElementById('root'));

Modify the XMLHttpRequest before request send

Document editor component provides an option to modify the XMLHttpRequest object (setting additional headers, if needed) using beforeXmlHttpRequestSend event and it gets triggered before a server request.

You can customize the required XMLHttpRequest properties.

The following example code illustrates how to modify the XMLHttpRequest using beforeXmlHttpRequestSend.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
  XmlHttpRequestEventArgs,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container: DocumentEditorContainerComponent;
  function onCreate() {
    // Below action, cancel all server-side interactions expect spell check
    container.beforeXmlHttpRequestSend = (
      args: XmlHttpRequestEventArgs
    ): void => {
      //Here, modifying the request headers
      args.headers = [{ syncfusion: 'true' }];
      args.withCredentials = true;
      switch (args.serverActionType) {
        case 'Import':
        case 'RestrictEditing':
        case 'SystemClipboard':
          args.cancel = true;
          break;
      }
    };
  }

  return (
    <DocumentEditorContainerComponent
      id="container"
      ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      enableToolbar={true}
      created={onCreate}
    />
  );
}
export default App
ReactDOM.render(<App />, document.getElementById('root'));

Note: Find the customizable serverActionType values are 'Import' | 'RestrictEditing' | 'SpellCheck' | 'SystemClipboard'.