JSPM

@bobbyquantum/ngx-editor

21.0.0-beta.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 25
  • Score
    100M100P100Q70400F
  • License MIT

The Rich Text Editor for Angular, Built on ProseMirror (Zoneless Fork)

Package Exports

  • @bobbyquantum/ngx-editor
  • @bobbyquantum/ngx-editor/commands
  • @bobbyquantum/ngx-editor/helpers
  • @bobbyquantum/ngx-editor/input-rules
  • @bobbyquantum/ngx-editor/package.json
  • @bobbyquantum/ngx-editor/schema
  • @bobbyquantum/ngx-editor/utils

Readme

@bobbyquantum/ngx-editor

ngxEditor

The Rich Text Editor for Angular 21+ (Zoneless), Built on ProseMirror

⚠️ This is a fork of sibiraj-s/ngx-editor

The original project appears to be inactive. This fork has been updated to support Angular 21 with zoneless change detection and modern Angular patterns. It is published under a scoped npm package for independent distribution.

What's Different

  • Angular 21 support
  • Zoneless change detection (provideZonelessChangeDetection())
  • OnPush change detection for all components
  • Angular Signals for reactive state
  • Modern control flow (@if, @for instead of *ngIf, *ngFor)
  • inject() pattern instead of constructor injection
  • Ctrl/Cmd+Click to open links in editor

Getting Started

Installation

npm install @bobbyquantum/ngx-editor

Usage

Note: By default the editor comes with minimal features.

import {
  NgxEditorComponent,
  NgxEditorMenuComponent,
  Editor,
} from '@bobbyquantum/ngx-editor';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'editor-component',
  templateUrl: 'editor.component.html',
  styleUrls: ['editor.component.scss'],
  standalone: true,
  imports: [NgxEditorComponent, NgxEditorMenuComponent, FormsModule],
})
export class MyEditorComponent implements OnInit, OnDestroy {
  html = '';
  editor: Editor;

  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

Then in HTML

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [ngModel]="html"
    [disabled]="false"
    [placeholder]="'Type here...'"
  ></ngx-editor>
</div>

Zoneless Setup

In your app config:

import { provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection()],
};

Browser Compatibility

Works on all Evergreen browsers:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Safari
  • Opera

Icons

Icons are from https://fonts.google.com/icons

Original Project

This is a fork of sibiraj-s/ngx-editor. Full credit to the original author for the excellent foundation.

License

MIT - See LICENSE