Skip to content

Latest commit

 

History

History
121 lines (91 loc) · 2.99 KB

README.md

File metadata and controls

121 lines (91 loc) · 2.99 KB
Raw

NgxEditor

ngxEditor

The Rich Text Editor for Angular, Built on ProseMirror

Tests npm version npm npm
licence

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 pnpm or yarn

npm install ngx-editor
# or
pnpm install ngx-editor
# 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

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.