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][stackblitz] | [documentation] | [migrating from other editors][migration]

$3

Install via Package managers such as [npm] or [pnpm] or [yarn]

``bash
npm install ngx-editor


or

pnpm install ngx-editor

or

yarn add ngx-editor
`

$3

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

Component

`ts
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 NgxEditorComponent implements OnInit, OnDestroy {
html = '';
editor: Editor;
ngOnInit(): void {
this.editor = new Editor();
}

ngOnDestroy(): void {
this.editor.destroy();
}
}
`

Then in HTML

`html



``

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.

[npm]: https://www.npmjs.com/
[pnpm]: https://pnpm.io/
[yarn]: https://yarnpkg.com/lang/en/
[documentation]: https://sibiraj-s.github.io/ngx-editor
[demo]: https://ngx-editor.stackblitz.io/
[stackblitz]: https://stackblitz.com/edit/ngx-editor
[migration]: https://sibiraj-s.github.io/ngx-editor/#/migration