@eqproject/eqp-editor v3.0.0

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• Angular Material installed and imported

Dependencies (automatically installed)

• @syncfusion/ej2-angular-documenteditor: 18.4.35
• @syncfusion/ej2-angular-dropdowns: 18.4.35
• @syncfusion/ej2-angular-navigations: 18.4.35
• @syncfusion/ej2-locale: 18.4.30
• @ngx-translate/core: 13.0.0
• @ngx-translate/http-loader: 6.0.0

Getting started

This package allows you to use a word editor for creating documents in docx format. In addition to the text formatting features, it allows you to define a list of tags that can be inserted into the document by drag & drop

Step 1: Install eqp-editor:

NPM

npm install --save @eqproject/eqp-editor

Step 2: Import the EqpEditorModule :

import { EqpEditorModule } from '@eqproject/eqp-editor';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpEditorModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Add these scss files in your scss file :

@import "~@syncfusion/ej2-base/styles/material.css";
@import "~@syncfusion/ej2-buttons/styles/material.css";
@import "~@syncfusion/ej2-inputs/styles/material.css";
@import "~@syncfusion/ej2-popups/styles/material.css";
@import "~@syncfusion/ej2-lists/styles/material.css";
@import "~@syncfusion/ej2-navigations/styles/material.css";
@import "~@syncfusion/ej2-splitbuttons/styles/material.css";
@import "~@syncfusion/ej2-dropdowns/styles/material.css";
@import "~@syncfusion/ej2-calendars/styles/material.css";
@import "~@syncfusion/ej2-angular-documenteditor/styles/material.css";

Step 4: Invoke the loadTranslateService method

This step is mandatory as it allows eqp-editor to load an external TranslateService (which must reside in the project) and which will be used to change the language of the documentation. If a project does not use the TranslateModule module it is still necessary to configure it and pass an empty TranslateService to eqp-editor

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    EqpEditorModule,
    FormsModule,
    MaterialModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate: false
    })
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' },
    { provide: LOCALE_ID, useValue: 'it-IT' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(private eqpEditorService: EqpEditorService) {
    this.eqpEditorService.loadTranslateService(this.translate);
  }
}

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

API

Inputs

Outputs

Models used

CustomToolbarItemModel: syncfusion interface used to show all the additional features, not included among the default ones of eqp-editor

By default, the buttons shown in the editor are: 'New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find'. All other possible actions, according to those exposed by syncfusion, can be configured through this class

IPlaceholderDTO: class for configure each individual filter

Use cases

Use Example in class :

Define selector in html

<eqp-editor (documentSaved)="documentSaved($event)" 
            [placeholderEndpoint]="placeholderEndPointVariable" 
            [documentSaveType]="DocumentSaveType.BLOB"></eqp-editor>

Define component variable for placeholders endpoint

    public placeholderEndPointVariable: string;

Initialize component variable for placeholders endpoint

    this.placeholderEndPointVariable = environment.apiFullUrl + "/Placeholder/GetPlaceholders";

Write the method to invoke when the documentSaved output event is fired

    documentSaved(blobFile) {
        //DO SOMETHING
        console.log(blobFile);
  }

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it