@feature23/ngx-editor

This is a fork of ngx-editor maintained by feature23. It includes experimental changes and Angular version updates that have not yet been merged upstream. If you don't need these changes, please use the official package at ngx-editor.

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 @feature23/ngx-editor
# or
pnpm install @feature23/ngx-editor
# or
yarn add @feature23/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 '@feature23/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 NgxEditorComponent 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.