Setting up a Rich Text Editor for Angular

We will use ngx-editor for this purpose. NgxEditor is a wysiwyg editor powered by ProseMirror. ProseMirror is a toolkit for building rich-text editors on the web. The editor extends ProseMirror features and provides most required functions by default and exposes api's extend it as well.

Enough said, Lets integrate the editor

Installation

npm i ngx-editor
#or
yarn add ngx-editor

Source code: https://github.com/sibiraj-s/ngx-editor

Step 1:

Import the NgxEditorModule into your app.

import { NgxEditorModule } from "ngx-editor";

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

Step 2:

Create an editor instance and use it in your component.

import { Editor } from "ngx-editor";

export class EditorComponent implements OnInit, OnDestroy {
  editor: Editor;
  html: "<p>Hello World!</p>";

  ngOnInit(): void {
    this.editor = new Editor();
  }

  // make sure to destory the editor
  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

and in HTML

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [ngModel]="html"
    [editable]="true"
    [placeholder]="Type here..."
  ></ngx-editor>
</div>

NgxEditor_Wrapper is an optional helper css class exposed by the module for wrapping menubar and the editor.

Step 3:

That's it. It is as simple as that. The above code will result in the following.

Refer the stackblitz https://ngx-editor.stackblitz.io/ for a working example.

---

Commands

The editor also exposes some useful commands which is already used by the editor internally so that you will be able to programmatically update the content or create a custom menu etc.,

this.editor.commands
  .textColor("red")
  .insertText("Hello world!")
  .focus()
  .scrollIntoView()
  .exec();

The commands are chainable. Call the exec at the end to execute the commands.

---

Customizing the toolbar

The toolbar by default enables all the options available. You can customize it by providing the array of items to it. Also the preset of color pallete in the toolbar can be customized as well.

export class AppComponent implements OnInit, OnDestroy {
  editor: Editor;
  toolbar: Toolbar = [
    // default value
    ["bold", "italic"],
    ["underline", "strike"],
    ["code", "blockquote"],
    ["ordered_list", "bullet_list"],
    [{ heading: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
    ["link", "image"],
    ["text_color", "background_color"],
    ["align_left", "align_center", "align_right", "align_justify"],
  ];
  colorPresets = ["red", "#FF0000", "rgb(255, 0, 0)"];

  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

then in HTML

<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [colorPresets]="colorPresets"
>
</ngx-editor-menu>

Adding Custom items to the toolbar.

You can add custom components to the toolbar extending its current features. You can do by creating a custom template and referring it the the menu via customMenuRef input prop.

<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [customMenuRef]="customMenu"
>
</ngx-editor-menu>

<!-- Create template reference -->
<ng-template #customMenu>
  <app-custom-menu [editor]="editor"></app-custom-menu>
</ng-template>

You can use the commands provided by the editor in your custom component or create a custom command. The editor also provides the view. You can read more about that here. https://prosemirror.net/docs/ref/#view

new Editor().view;

With all this you should be able to integrate a full featured Rich Text Editor into your angular application.

Good day 👋