Skip to content

bobbyquantum/ngx-editor

Β 
Β 

Repository files navigation

@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

About

πŸ–‹οΈ Rich Text Editor for angular using ProseMirror

Resources

License

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • TypeScript 85.5%
  • HTML 6.6%
  • SCSS 5.9%
  • JavaScript 2.0%