Set default format in document editor in Angular Document editor component

3 May 20258 minutes to read

You can set the default character format, paragraph format and section format in Document editor.

Set the default character format

You can use setDefaultCharacterFormat method to set the default character format. For example, Document editor default font size is 11 and you can change it as any valid value.

The following example code illustrates how to change the default font size in Document editor.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  ToolbarService,
  DocumentEditorContainerComponent,
} from '@syncfusion/ej2-angular-documenteditor';
import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [DocumentEditorContainerModule],
  providers: [ToolbarService],
  template: `
    <ejs-documenteditorcontainer #documenteditor_default 
      serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" 
      height="600px" 
      style="display:block" 
      [documentEditorSettings]= "fontFamilies"
      (created)="onCreate()"
    [enableToolbar]=true >
    </ejs-documenteditorcontainer>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container?: DocumentEditorContainerComponent;
  public fontFamilies = {
    fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings'],
  };
  ngOnInit(): void {}
  onCreate() {
    this.container?.documentEditor.setDefaultCharacterFormat({ fontSize: 20 });
  }
}

The Web API hosted link https://services.syncfusion.com/angular/production/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 or Docker image for hosting your own web service and use for the serviceUrl property.

Similarly, you can change the required CharacterFormatProperties default value.

The following example code illustrates how to change other character format default value in Document editor.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  ToolbarService,
  DocumentEditorContainerComponent,
  CharacterFormatProperties,
} from '@syncfusion/ej2-angular-documenteditor';
import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [DocumentEditorContainerModule],
  providers: [ToolbarService],
  template: `
    <ejs-documenteditorcontainer #documenteditor_default 
      serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" 
      height="600px" 
      style="display:block" 
      [documentEditorSettings]= "fontFamilies"
      (created)="onCreate()"
    [enableToolbar]=true >
    </ejs-documenteditorcontainer>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container?: DocumentEditorContainerComponent;
  public fontFamilies = {
    fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings'],
  };
  ngOnInit(): void {}
  onCreate() {
    let defaultCharacterFormat: CharacterFormatProperties = {
      bold: false,
      italic: false,
      baselineAlignment: 'Normal',
      underline: 'None',
      fontColor: '#000000',
      fontFamily: 'Algerian',
      fontSize: 12,
    };
    this.container?.documentEditor.setDefaultCharacterFormat(
      defaultCharacterFormat
    );
  }
}

The Web API hosted link https://services.syncfusion.com/angular/production/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 or Docker image for hosting your own web service and use for the serviceUrl property.

Set the default paragraph format

You can use setDefaultParagraphFormat API to set the default paragraph format. You can change the required ParagraphFormatProperties default value.

The following example code illustrates how to change the paragraph format(before spacing, line spacing etc.,) default value in Document editor.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  ToolbarService,
  DocumentEditorContainerComponent,
  ParagraphFormatProperties,
} from '@syncfusion/ej2-angular-documenteditor';
import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [DocumentEditorContainerModule],
  providers: [ToolbarService],
  template: `
    <ejs-documenteditorcontainer #documenteditor_default 
      serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" 
      height="600px" 
      style="display:block" 
      [documentEditorSettings]= "fontFamilies"
      (created)="onCreate()"
    [enableToolbar]=true >
    </ejs-documenteditorcontainer>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container?: DocumentEditorContainerComponent;
  public fontFamilies = {
    fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings'],
  };
  ngOnInit(): void {}
  onCreate() {
    let defaultParagraphFormat: ParagraphFormatProperties = {
      beforeSpacing: 8,
      lineSpacing: 1.5,
      leftIndent: 24,
      textAlignment: 'Center',
    };
    this.container?.documentEditor.setDefaultParagraphFormat(
      defaultParagraphFormat
    );
  }
}

The Web API hosted link https://services.syncfusion.com/angular/production/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 or Docker image for hosting your own web service and use for the serviceUrl property.

Set the default section format

You can use setDefaultSectionFormat API to set the default section format. You can change the required SectionFormatProperties default value.

The following example code illustrates how to change the section format(header and footer distance, page width and height, etc.,) default value in Document editor.

import { Component, OnInit,ViewChild } from '@angular/core';
import { ToolbarService ,DocumentEditorContainerComponent,SectionFormatProperties} from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "fontFamilies" [enableToolbar]=true (created)="onCreate()"> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService]
})
export class AppComponent implements OnInit {
    @ViewChild('documenteditor_default')
    public container: DocumentEditorContainerComponent;
    public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings']};
    ngOnInit(): void {
    }
    onCreate() {
        let defaultSectionFormat:SectionFormatProperties = {
            pageWidth: 500,
            pageHeight: 800,
            headerDistance: 56,
            footerDistance: 48,
            leftMargin: 12,
            rightMargin: 12,
            topMargin:0,
            bottomMargin:0
         };
         this.container.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
    }
}

The Web API hosted link https://services.syncfusion.com/angular/production/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 or Docker image for hosting your own web service and use for the serviceUrl property.