Web Services in Syncfusion JavaScript DOCX Editor Control

28 Aug 20269 minutes to read

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

Which operations require server-side interaction

Operations When client-server communication is 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 (JavaScript DOCX 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 Word library (DocIO) and converts it into SFDT for opening the document in DOCX Editor.
Paste with formatting When pasting the formatted content (HTML/RTF) received from system clipboard. For converting HTML/RTF to SFDT format.

Note: However, plain text received from the system clipboard will be pasted directly on 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 a hash. Client: Sends the input data for the hashing algorithm.
Server: Receives the input data for the hashing algorithm and sends the result hash information back to the client.
Spellcheck (default) When the spellchecker is enabled on the client-side DOCX 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 DOCX Editor provides options to spell check page by page when loading the documents. By enabling optimized spell check on the 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 a file format other than DOCX and SFDT.

For saving the files as WordML, DOC, RTF, HTML, ODT, or Text using the Word library (DocIO) and PDF using the Word (DocIO) and PDF libraries.		 You can transfer the document from the client to the 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 Word library (DocIO) on the 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 Word library (DocIO) on the server or sends the saved file to the client browser.

NOTE

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

Please refer to 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 as shown below:

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

Required Web API structure

Please check the table below for the 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 the 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 the spell checked word
Save (optional API) Parameter: SaveParameter
public class SaveParameter
{
public string Content { get; set; }
public string FileName { get; set; }
}		 void (Save the file as a 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 on the client side)
Export (optional API) Files(IFormCollection) FileStreamResult (to save the document on the client side)

Customize the expected method name

The DOCX 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.

    var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px', enableSpellCheck: true });
    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
    container.serviceUrl = hostUrl + 'api/documenteditor/';
    // Customize the API name.
    var settings = { import: 'Import1', systemClipboard: 'SystemClipboard1', spellCheck: 'SpellCheck1', restrictEditing: 'RestrictEditing1' };
    container.serverActionSettings = settings;
    container.appendTo('#container');

Add custom headers to the XMLHttpRequest

The DOCX Editor component provides an option to add custom headers to the XMLHttpRequest using the headers.

    var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px'});
    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
    container.serviceUrl = hostUrl + 'api/documenteditor/';
    // Custom headers.
    var customHeaders = [{ 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }, { 'Content-Type': 'application/json' }];
    container.headers = customHeaders;
    container.appendTo('#container');

Modify the XMLHttpRequest before sending a request

The DOCX Editor component provides an option to modify the XMLHttpRequest object (setting additional headers, if needed) using the beforeXmlHttpRequestSend event, which is triggered before a server request.

You can customize the required XMLHttpRequest properties.

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

var container = new ej.documenteditor.DocumentEditorContainer({
  enableToolbar: true,
  height: '590px',
});
// The below action cancels all server-side interactions except spell check.
container.beforeXmlHttpRequestSend = function(args) {
  // 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;
  }
};
container.appendTo('#container');

NOTE

The customizable serverActionType values are 'Import', 'RestrictEditing', 'SpellCheck', and 'SystemClipboard'.