DEV Community

Cover image for Setting up a Rich Text Editor for Angular
Sibiraj
Sibiraj

Posted on

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


Enter fullscreen mode Exit fullscreen mode

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 {}


Enter fullscreen mode Exit fullscreen mode

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();
  }
}


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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.

Editor Preview

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();


Enter fullscreen mode Exit fullscreen mode

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();
  }
}


Enter fullscreen mode Exit fullscreen mode

then in HTML



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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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

Good day 👋

Top comments (0)