ngx-blocknote

This project is an Angular implementation of BlockNote. It aims to provide the same functionality and appearance as the original React project but with the added benefit of being fully integrated into the Angular framework.

Installation

npm install @dytab/ngx-blocknote

Basic Setup

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { BnaEditorComponent } from '@dytab/ngx-blocknote';

@Component({
  standalone: true,
  imports: [CommonModule, BnaEditorComponent],
  template: ` <bna-editor (contentChanged)="readTextFromEditor($event)" /> `,
})
export class BasicSetupExample {
  editorContent!: Block[];

  readTextFromEditor(blocks: Block[]) {
    this.editorContent = blocks;
  }
}

Further Examples

For more examples and detailed guides, please visit the documentation website.

Features

| Blocks | Status | | ------------ | ------ | | Headings | ✅ | | Basic Blocks | ✅ | | Table | ✅ | | Media | ✅ | | Emojis | ❌ |

| Formatting Toolbar | Status | | ------------------ | ------ | | Block Type Select | ✅ | | Bold | ✅ | | Italic | ✅ | | Unterline | ✅ | | Strikethrough | ✅ | | Align text left | ✅️ | | Align text center | ✅ | | Align text right | ✅️ | | Text Colors | ✅️ | | Nest Block | ❌ | | Unnest Block | ❌️ | | Create Link | ✅️ |

License

This project is distributed under the terms of the MIT License.