NgxNoteEditor

Description

Rich Text Editor for Angular based on ProseMirror with the ability to create and use your own toolbar items. The package also provides you with ready-made solutions for toolbar items and ProseMirror plugins for the editor.
You can get information about the API and more NgxNoteEditor examples from the documentation.

Installation

Run this command to add ngx-note-editor package to your project

npm i @talrace/ngx-note-editor

Import editor module. This module provides ready-made toolbar button components and basic components and directives for creating custom toolbar items.

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

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

Usage

Example of full-featured NgxNoteEditor

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { EditorModule } from '@talrace/ngx-note-editor';

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

app.component.html

<!-- button to switch the editing/preview mode in the editor -->
<button (click)="onToggleEditMode()">Change edit mode</button>
<!-- editor toolbar with buttons from the ngx-note-editor package -->
<!-- note that the package does not provide a toolbar, so it's up to you to decide how to style the editor toolbar -->
<div *ngIf="isEditable" class="editor-toolbar">
    <ngx-bold-button [editor]="editor"></ngx-bold-button>
    <ngx-italic-button [editor]="editor"></ngx-italic-button>
    <ngx-underline-button [editor]="editor"></ngx-underline-button>
    <ngx-strike-button [editor]="editor"></ngx-strike-button>
    <ngx-code-button [editor]="editor"></ngx-code-button>
    <ngx-blockquote-button [editor]="editor"></ngx-blockquote-button>
    <ngx-bullet-list-button [editor]="editor"></ngx-bullet-list-button>
    <ngx-ordered-list-button [editor]="editor"></ngx-ordered-list-button>
    <ngx-alignment-button [editor]="editor" [align]="'left'"></ngx-alignment-button>
    <ngx-alignment-button [editor]="editor" [align]="'center'"></ngx-alignment-button>
    <ngx-alignment-button [editor]="editor" [align]="'right'"></ngx-alignment-button>
    <ngx-alignment-button [editor]="editor" [align]="'justify'"></ngx-alignment-button>
    <ngx-file-image-button [editor]="editor"></ngx-file-image-button>
    <ngx-heading-menu-button [editor]="editor"></ngx-heading-menu-button>
    <ngx-link-menu-button [editor]="editor"></ngx-link-menu-button>
    <ngx-font-color-button [editor]="editor"></ngx-font-color-button>
    <ngx-font-size-menu-button [editor]="editor"></ngx-font-size-menu-button>
    <ngx-font-family-menu-button [editor]="editor"></ngx-font-family-menu-button>
</div>
<!-- the editor component itself -->
<ngx-editor *ngIf="isEditable; else viewer" [editor]="editor"></ngx-editor>
<!-- container for displaying the editor's non-editable content -->
<ng-template #viewer>
    <ngx-editor-view [editorView]="editor.view"></ngx-editor-view>
</ng-template>

app.component.ts

import { Component, Injector, inject } from '@angular/core';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
import { Editor } from '@talrace/ngx-note-editor';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    isEditable = true;

    content!: SafeHtml;

    editor!: Editor;

    constructor(private domSanitizer: DomSanitizer) {
        // create an instance of the default editor
        this.editor = new Editor(inject(Injector));
    }

    onToggleEditMode(): void {
        if (this.isEditable) {
            const content = this.editor.content.toHtml();
            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
        }

        this.isEditable = !this.isEditable;
    }
}

app.component.scss

// styles of your editor's toolbar
.editor-toolbar {
    display: flex;
    gap: 4px;
}