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 yarn

npm install ngx-editor --save
# 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.

Import ngx-editor module

import { NgxEditorModule } from 'ngx-editor';

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

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();
  }
}

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

Working with HTML

If the Input to the component is HTML, output will be HTML. To manually convert json output from the editor to html

import { toHTML } from 'ngx-editor';

const html = toHTML(jsonDoc, schema); // schema is optional

Or to convert HTML to json. Optional, as Editor will accept HTML input

import { toDoc } from 'ngx-editor';

const jsonDoc = toDoc(html);

Commands

this.editor.commands.textColor('red').insertText('Hello world!').focus().scrollIntoView().exec();

Run exec to apply the changes to the editor.

Optional Configuration

You can specify locals to be used in the editor

NgxEditorModule.forRoot({
  locals: {
    bold: 'Bold',
    italic: 'Italic',
    code: 'Code',
    underline: 'Underline',
    // ...
  },
});

Browser Compatibility

Mostly works on all Evergreen-Browsers like

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

Angular Compatibility

Angular 14+.

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.