NgxEditor

A Simple WYSIWYG Editor for Angular Applications.

Getting Started

NOTE: This is documentation for [email protected]. View here for [email protected] documentation

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 no features enabled. Refer the demo and documentation for more details.

Import ngx-editor module

import { NgxEditorModule } from 'ngx-editor';

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

export class AppModule {}

Then in HTML

<ngx-editor [ngModel]="jsonDoc"></ngx-editor>

For ngModel to work, You must import FormsModule from @angular/forms

Optional Configuration

import { menu, placeholder, schema } from 'ngx-editor';

NgxEditorModule.forRoot({
  schema, // optional scheama, see https://sibiraj.dev/ngx-editor/additional-documentation/schema.html
  plugins: [
    menu({
      // default options (Optional)
      toolbar: [
        ['bold', 'italic', 'code'], // inline icons
        ['ordered_list', 'bullet_list'],
        [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }] // dropdown
        [codemirror] // custom menu, see https://sibiraj.dev/ngx-editor/additional-documentation/menu-plugin.html
      ],
      labels: {
        bold: 'Bold',
        italics: 'Italics',
        code: 'Code',
        ordered_list: 'Ordered List',
        bullet_list: 'Bullet List',
        heading: 'Heading'
      }
    }),
    placholder('Type something here...')
  ],
  nodeViews: {} // optional, see https://prosemirror.net/examples/footnote/
});

Compatibility

All Evergreen-Browsers are supported

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Opera

Demo

Demo at stackblitz https://ngx-editor.stackblitz.io/

Edit the stackblitz here https://stackblitz.com/edit/ngx-editor

Documentation

Documentation is auto-generated using compodoc, and can be viewed here: https://sibiraj-s.github.io/ngx-editor/