Rich Text Editor for Angular using ProseMirror | ngx-editor

ngx-editor is a simple WYSIWYG rich text editor using ProseMirror for Angular 2+ applications.

free angular wysiwyg editor, wysiwyg editor angular npm, best wysiwyg editor for angular, rich text editor angular, angular editor customize toolbar

Browser Compatibility

Mostly works on all Evergreen-Browsers like

Google Chrome
Microsoft Edge
Mozilla Firefox
Opera
Safari

How to make use of it:

Installation

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

1. Import ngx-editor module

import { NgxEditorModule } from 'ngx-editor';

@NgModule({
  imports: [NgxEditorModule],
})
export class AppModule {}

2. Component

import { Editor } from 'ngx-editor';

export class EditorComponent implements OnInit, OnDestroy {
  editor: Editor;
  html: '';

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

  // make sure to destory the editor
  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

3. 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>

wysiwyg editor for angular, ngx-editor Plugin/Github