NgxEditor

The Rich Text Editor for Angular, Built on ProseMirror

A simple rich text editor for angular applications built with ProseMirror. It is a drop in and easy-to-use editor and can be easily extended using prosemirror plugins to build any additional or missing features

Getting Started

demo | edit on stackblitz | documentation | migrating from other editors

Installation

Install via Package managers such as npm or pnpm or yarn

npm install ngx-editor
# or
pnpm install ngx-editor
# or
yarn add ngx-editor

Usage

Note: By default the editor comes with minimal features. Refer the demo and documentation for more details and examples.

Component

import { NgxEditorComponent, NgxEditorMenuComponent, Editor } from '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 EditorComponent 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>

Note: Input can be a HTML string or a jsonDoc

Browser Compatibility

Mostly works on all Evergreen-Browsers like

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

Collaborative Editing

See https://sibiraj-s.github.io/ngx-editor/#/collab

Icons

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

Contributing

All contributions are welcome. See CONTRIBUTING.md to get started.