Introduction

Getting Started

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

Installation

Install via Package managers such as npm or pnpm or yarn

npm

npm install ngx-editor

pnpm

pnpm install ngx-editor

yarn

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 NgxEditorComponent and NgxEditorMenuComponent, then initialize the editor:

import { NgxEditorComponent, NgxEditorMenuComponent, Editor } from 'ngx-editor';

@Component({
  selector: 'editor-component',
  templateUrl: 'editor.component.html',
  styleUrls: ['editor.component.scss'],
  standalone: true,
  imports: [NgxEditorComponent, NgxEditorMenuComponent],
})
export class NgxEditorComponent 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