Skip to content
NgxEditor

Introduction

Getting Started

demo | edit on stackblitz | documentation | migrating from other editors

Installation

Install via Package managers such as npm or pnpm or yarn

Terminal window
npm install 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 and icons to be used in the editor

NgxEditorModule.forRoot({
  locals: {
    bold: 'Bold',
    italic: 'Italic',
    code: 'Code',
    underline: 'Underline',
    // ...
  },
  icons: {
    bold: '<img src="https://example.com/icon.png" width="15" height="15" alt="">',
  },
});

Browser Compatibility

Mostly works on all Evergreen-Browsers like

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Opera
  • Safari