NgxEditor

Rich Text Editor for angular using ProseMirror

Getting Started

demo | edit on stackblitz | documentation | migrating from v4 | 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
• Opera
• Safari

Angular Compatibility

Angular 13+.

Collaborative Editing

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

Icons

Icons are from https://material.io/resources/icons/

Contributing

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