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
demo | edit on stackblitz | documentation | migrating from other editors
Install via Package managers such as npm or pnpm or yarn
npm install ngx-editor
# or
pnpm install ngx-editor
# or
yarn add ngx-editor
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
Mostly works on all Evergreen-Browsers like
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
- Opera
See https://sibiraj-s.github.io/ngx-editor/#/collab
Icons are from https://fonts.google.com/icons
All contributions are welcome. See CONTRIBUTING.md to get started.