Document Editor supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.
You can modify the left or right indentation of selected paragraphs using the following sample code.
this.documentEditor.selection.paragraphFormat.leftIndent= 24;
this.documentEditor.selection.paragraphFormat.rightIndent= 24;
You can define special indent for first line of the paragraph using the following sample code.
this.documentEditor.selection.paragraphFormat.firstLineIndent= 24;
You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code.
this.documentEditor.editor.increaseIndent()
You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code.
this.documentEditor.editor.decreaseIndent()
You can get or set the text alignment of selected paragraphs using the following sample code.
this.documentEditor.selection.paragraphFormat.textAlignment= 'Center' | 'Left' | 'Right' | 'Justify';
You can toggle the text alignment of selected paragraphs by specifying a value using the following sample code.
this.documentEditor.editor.toggleTextAlignment('Center' | 'Left' | 'Right' | 'Justify');
You can define the line spacing and its type for selected paragraphs using the following sample code.
this.documentEditor.selection.paragraphFormat.lineSpacingType='AtLeast';
this.documentEditor.selection.paragraphFormat.lineSpacing= 6;
You can define the spacing before or after the paragraph by using the following sample code.
this.documentEditor.selection.paragraphFormat.beforeSpacing= 24;
this.documentEditor.selection.paragraphFormat.afterSpacing= 24;
You can also set automatic spacing before and after the paragraph by using the following sample code.
this.documentEditor.selection.paragraphFormat.spaceBeforeAuto = true;
this.documentEditor.selection.paragraphFormat.spaceAfterAuto = true;
Note: If auto spacing property is enabled, then value defined in the beforeSpacing
and afterSpacing
property will not be considered.
You can enable or disable the following pagination properties for the paragraphs in a Word document.
The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs.
this.documenteditor.selection.paragraphFormat.widowControl = false;
this.documenteditor.selection.paragraphFormat.keepWithNext = true;
this.documenteditor.selection.paragraphFormat.keepLinesTogether = true;
The following sample demonstrates the paragraph formatting options using a toolbar.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
DocumentEditorComponent, EditorService, SelectionService, EditorHistoryService, SfdtExportService, ContextMenuService
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
styleUrls: ['styles.css'],
//specifies the template string for the Document Editor component
template: `<div>
<div>
<ejs-toolbar (clicked)='toolbarButtonClick($event)'>
<e-items>
<e-item prefixIcon='e-de-ctnr-alignleft e-icons' id='AlignLeft' tooltipText='Align Left'></e-item>
<e-item prefixIcon='e-de-ctnr-aligncenter e-icons' id='AlignCenter' tooltipText='AlignCenter'></e-item>
<e-item prefixIcon='e-de-ctnr-alignright e-icons' id='AlignRight' tooltipText='AlignRight'></e-item>
<e-item prefixIcon='e-de-ctnr-justify e-icons' id='Justify' tooltipText='Justify'></e-item>
<e-item prefixIcon='e-de-ctnr-increaseindent e-icons' id='IncreaseIndent' tooltipText='Increase Indent'></e-item>
<e-item prefixIcon='e-de-ctnr-decreaseindent e-icons' id='DecreaseIndent' tooltipText='Decrease Indent'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-de-ctnr-clearall e-icons' id='ClearFormat' tooltipText='ClearFormatting'></e-item>
</e-items>
</ejs-toolbar>
</div>
<ejs-documenteditor #document_editor (selectionChange)='onSelectionChange()' [enableSelection]='true' [isReadOnly]='false' [enableEditor]=true [enableEditorHistory]=true [enableSfdtExport]=true [enableContextMenu]=true height="330px" style="display:block"></ejs-documenteditor>
</div>`,
encapsulation: ViewEncapsulation.None,
providers: [EditorService, SelectionService, EditorHistoryService, SfdtExportService, ContextMenuService]
})
export class AppComponent {
@ViewChild('document_editor')
public documentEditor: DocumentEditorComponent;
public toolbarButtonClick(arg: any) {
switch (arg.item.id) {
case 'AlignLeft':
//Toggle the Left alignment for selected or current paragraph
this.documentEditor.editor.toggleTextAlignment('Left');
break;
case 'AlignRight':
//Toggle the Right alignment for selected or current paragraph
this.documentEditor.editor.toggleTextAlignment('Right');
break;
case 'AlignCenter':
//Toggle the Center alignment for selected or current paragraph
this.documentEditor.editor.toggleTextAlignment('Center');
break;
case 'Justify':
//Toggle the Justify alignment for selected or current paragraph
this.documentEditor.editor.toggleTextAlignment('Justify');
break;
case 'IncreaseIndent':
//Increase the left indent of selected or current paragraph
this.documentEditor.editor.increaseIndent();
break;
case 'DecreaseIndent':
//Decrease the left indent of selected or current paragraph
this.documentEditor.editor.decreaseIndent();
break;
case 'ClearFormat':
//Clear formatting for selected paragraph or content.
this.documentEditor.editor.clearFormatting();
break;
}
}
// Selection change to retrieve formatting
public onSelectionChange() {
if (this.documentEditor.selection) {
var paragraphFormat = this.documentEditor.selection.paragraphFormat;
var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify'];
//Remove toggle state.
for (var i = 0; i < toggleBtnId.length; i++) {
let toggleBtn: HTMLElement = document.getElementById(toggleBtnId[i]);
toggleBtn.classList.remove('e-btn-toggle');
}
//Add toggle state based on selection paragraph format.
if (paragraphFormat.textAlignment === 'Left') {
document.getElementById('AlignLeft').classList.add('e-btn-toggle');
} else if (paragraphFormat.textAlignment === 'Right') {
document.getElementById('AlignRight').classList.add('e-btn-toggle');
} else if (paragraphFormat.textAlignment === 'Center') {
document.getElementById('AlignCenter').classList.add('e-btn-toggle');
} else {
document.getElementById('Justify').classList.add('e-btn-toggle');
}
// #endregion
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';
import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ButtonModule,
ToolbarModule,
DocumentEditorAllModule,
ComboBoxModule,
ColorPickerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);