WYSIWYG HTML Angular Editor Example

In this tutorial, you will learn how to add WYSIWYG HTML angular-editor in your Angular application in just few steps.

We will create a text editor that looks like the one below:

Create HTML text editor in Angular
  1. Lets start by installing kolkov/angular-editor:
        npm install @kolkov/angular-editor --save
  3. Install angular-font-awesome:
        npm install angular-font-awesome --save
  5. Import angular-font-awesome by adding the following in your my-component.css file:
        @import  "../../node_modules/font-awesome/css/font-awesome.css"
  7. Add AngularEditorModule, HttpClientModule, FormsModule file in your app.module.ts file:
  9. Add the following in your some-component.html file:

    You can also remove [config]="configEditor" from the above code to load editor with default configuration.

  11. To configure editor, go to your some-component.ts file and create an object from AngularEditorConfig class as shown in the example below:
  13. On running your application, you should see the editor now.