How to Disable Optimized Text Measuring in Angular DOCX Editor

27 Aug 20263 minutes to read

Starting from v19.3.0.x, the accuracy of text size measurements in Angular DOCX Editor (Document Editor) is improved to match Microsoft Word pagination for most Word documents. This improvement is included as the default behavior along with an optional API enableOptimizedTextMeasuring in Document Editor settings.

If you want the DOCX Editor component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions, then you can disable this optimized text measuring improvement, by setting false to enableOptimizedTextMeasuring property of Angular DOCX Editor component.

Disable optimized text measuring in DocumentEditorContainer instance

The following example code illustrates how to disable optimized text measuring improvement in DocumentEditorContainer instance.

import { Component, ViewEncapsulation } from '@angular/core';
import {
  DocumentEditorComponent, PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService,
  SearchService, EditorService, ImageResizerService, EditorHistoryService, ContextMenuService,
  OptionsPaneService, HyperlinkDialogService, TableDialogService, BookmarkDialogService, TableOfContentsDialogService,
  PageSetupDialogService, StyleDialogService, ListDialogService, ParagraphDialogService, BulletsAndNumberingDialogService,
  FontDialogService, TablePropertiesDialogService, BordersAndShadingDialogService, TableOptionsDialogService,
  CellOptionsDialogService, StylesDialogService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
      selector: 'app-container',
      template: `<ejs-documenteditor id="container" [documentEditorSettings]="settings" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
      [enablePrint]=true [enableSfdtExport]=true [enableWordExport]=true [enableOptionsPane]=true [enableContextMenu]=true
      [enableHyperlinkDialog]=true [enableBookmarkDialog]=true [enableTableOfContentsDialog]=true [enableSearch]=true
      [enableParagraphDialog]=true [enableListDialog]=true [enableTablePropertiesDialog]=true [enableBordersAndShadingDialog]=true
      [enablePageSetupDialog]=true [enableStyleDialog]=true [enableFontDialog]=true [enableTableOptionsDialog]=true
      [enableTableDialog]=true [enableImageResizer]=true [enableEditor]=true [enableEditorHistory]=true>
      </ejs-documenteditor>`,
      encapsulation: ViewEncapsulation.None,
      providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService,
      ImageResizerService, EditorHistoryService, ContextMenuService, OptionsPaneService, HyperlinkDialogService, TableDialogService,
      BookmarkDialogService, TableOfContentsDialogService, PageSetupDialogService, StyleDialogService, ListDialogService,
      ParagraphDialogService, BulletsAndNumberingDialogService, FontDialogService, TablePropertiesDialogService,
      BordersAndShadingDialogService, TableOptionsDialogService, CellOptionsDialogService, StylesDialogService]
})

export class AppComponent {
  public settings = { enableOptimizedTextMeasuring: false };
}

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX 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 or Docker image for hosting your own web service and use for the serviceUrl property.

Disable optimized text measuring in DocumentEditor instance

The following example code illustrates how to disable optimized text measuring improvement in DocumentEditor instance.

import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-container',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer [documentEditorSettings]="settings" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService]
})
export class AppComponent {

  public settings = { enableOptimizedTextMeasuring: false };

}

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX 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 or Docker image for hosting your own web service and use for the serviceUrl property.