NgxNoder

Description

Rich Text Editor for Angular with basic WORD features and ability to create and use your own custom components. The package also provides customizable toolbar, header, custom search in editor and basic interfaces of custom components which you can overwrite to suit your needs in your application.\

You can get information about the API and more NgxNoder examples from the documentation.

Installation

Run this command to add ngx-noder package to your project

npm i @talrace/ngx-noder

Editor

Import editor module. This is basic module and provides creating, editing and viewing document functionality.

import { EditorModule } from '@talrace/ngx-noder';

@NgModule({
    // ...
    imports: [EditorModule],
    // ...
})
export class SomeModule{}

If you need save your changes in document, you need provide CommandsService in your module. This service provides passing commands from the editor to your application for further saving and applying them to your document.

import { CommandsService } from '@talrace/ngx-noder';

@NgModule({
    // ...
    provides: [CommandsService],
    // ...
})
export class SomeModule{}

Editor Toolbar

Import editor toolbar module, if you need toolbar for your editor. This module provides ready-made toolbar with buttons that covers all basic logic of the document content editing functionality.

import { EditorToolbarModule } from '@talrace/ngx-noder';

@NgModule({
    // ...
    imports: [EditorToolbarModule],
    // ...
})
export class SomeModule{}

Editor Header

Import standalone editor header component, if you need header for your editor. This component provides editor header component with buttons that contains basic functional with document and part of the document content editing functionality.

import { EditorHeaderComponent } from '@talrace/ngx-noder';

@NgModule({
    // ...
    imports: [EditorHeaderComponent],
    // ...
})
export class SomeModule{}

Editor Search

Import standalone editor search component, if you need custom search in your editor. This component provides custom search component and search and replace functionality in editor.

import { EditorSearchDialogComponent } from '@talrace/ngx-noder';

@NgModule({
    // ...
    imports: [EditorSearchDialogComponent],
    // ...
})
export class SomeModule{}

Editor Service

Provide Editor Service in your component with editor if you need to send commands to editor or gets some document status data. This service provides functionality of send data or commands to the editor and receive document state data or document interaction mode

import { EditorService } from '@talrace/ngx-noder';

@NgModule({
    // ...
    provides: [EditorService],
    // ...
})
export class SomeModule {}

Usage

Example of full-featured NgxNoder with toolbar, header, custom search and receiving commands from editor.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {
    EditorHeaderComponent,
    EditorModule,
    EditorSearchDialogComponent,
    EditorToolbarModule
} from '@talrace/ngx-noder';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        EditorHeaderComponent,
        EditorModule,
        EditorSearchDialogComponent,
        EditorToolbarModule
    ],
    providers: [CommandsService],
    bootstrap: [AppComponent]
})
export class AppModule{}

app.component.html

<app-editor-header
    [title]="title"
    [isViewOnly]="isViewOnly$ | async"
    (openFileFromDisk)="onConvertFile($event)"
    (addCustomElement)="addCustomElement($event)"
    (insertPageBreak)="onInsertPageBreak()"
    (createDocument)="createDocument()"
    (changeMode)="onModeChanged($event.value)"
    (saveAs)="onSave()"
    (print)="onPrint()"
    (insertImage)="onInsertImage($event)"
    (renameDocumentTitle)="onRenameDocumentTitle($event)"></app-editor-header>
<app-editor-toolbar
    [isViewOnly]="isViewOnly$ | async"
    [styles]="styles$ | async"
    [historyInfo]="historyInfo$ | async"
    (changeParagraphStyle)="onSetParagraphStyle($event)"
    (changeTextStyle)="onSetTextStyle($event)"
    (setNumberingTemplateType)="onSetNumberingTemplateType($event)"
    (removeNumberings)="onRemoveNumberings()"
    (undo)="onUndo()"
    (redo)="onRedo()"></app-editor-toolbar>
<app-editor
    #editor
    [content]="content$ | async"></app-editor>

app.component.ts

import { Store } from '@ngxs/store';
import { BehaviorSubject, filter, Observable, Subscription, take, tap } from 'rxjs';
import {
    BreakTypes,
    CommandsService,
    DEFAULT_FILE_NAME,
    DocxModel,
    EditorComponent,
    EditorSearchDialogComponent,
    EditorService,
    ElementDataModel,
    Mode,
    NumberingLevelModel,
    RevisionHelper,
    TextStyleModel
} from '@talrace/ngx-noder';
import { Component, OnInit, ViewChild } from '@angular/core';

import { CreateOperation } from "../../store/operations/operations.actions";
import { NoderState } from '../../store/noder/noder.state';
import { ObserverComponent } from '../../../+shared/abstract/observer.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent extends ObserverComponent implements OnInit {
    isViewOnly$: Observable<boolean>;

    documentId: number;

    get content$(): Observable<DocxModel> {
        return this._content$.asObservable();
    }
    private _content$ = new BehaviorSubject<DocxModel>(RevisionHelper.getEmptyDocxModel());

    @ViewChild('editor', { static: true }) editor: EditorComponent;

    constructor(
        private editorService: EditorService,
        private store: Store,
        private commandService: CommandsService
    ) {
        super();
        const mode: Mode = this.store.selectSnapshot(NoderState.mode);
        this.editorService.setIsViewOnly(mode !== Mode.Edit);
        this.isViewOnly$ = this.editorService.isViewOnly$;
    }

    ngOnInit() {
        this.subscriptions.push(
            this.createCommandSubscription()
        );
    }

    onPrint(): void {
        this.editor.printDocument();
    }

    onInsertPageBreak(): void {
        this.editorService.insertBreak(BreakTypes.Page);
    }

    onSetTextStyle(value: TextStyleModel): void {
        this.editorService.setTextStyles(value);
    }

    onSetNumberingTemplateType(value: NumberingLevelModel[]): void {
        this.editorService.setNumberingTemplateType(value);
    }

    addCustomElement(model: ElementDataModel): void {
        this.editorService.createCustomComponent(model);
    }

    onUndo(): void {
        this.editorService.undo();
    }

    private onOpenSearch(): void {
        this.dialog.open(EditorSearchDialogComponent, {
            position: { top: '0px', right: '0px' },
            hasBackdrop: false
        });
    }

    private createCommandSubscription(): Subscription {
        return this.commandService.createCommand$
            .pipe(
                filter(x => !!x),
                tap(command => {
                    this.store.dispatch(new CreateOperation(command));
                })
            )
            .subscribe()
    }
}

app.component.scss

// styles of your app component
:host {
    height: inherit;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}