Getting started with Angular Markdown Editor Component

22 Mar 20257 minutes to read

This section explains the steps required to create a simple Angular Markdown Editor component and configure its available functionalities.

To enable the quick Markdown editing feature, inject MarkdownEditorService in the provider section of AppComponent.

Refer to the video below for guidance on building a Markdown editor with the Angular Rich Text Editor.

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli@16.0.1

Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app

This command will prompt you for a few settings for the new project, such as whether to add Angular routing and which stylesheet format to use.

Initial_setup

By default, it will create a CSS-based application.

Next, navigate to the created project folder:

cd my-app

Adding Syncfusion Rich Text Edior package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Rich Text Editor component, use the following command.

npm install @syncfusion/ej2-angular-richtexteditor --save

The –save will instruct NPM to include the rich text editor package inside of the dependencies section of the package.json.

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder.
This can be referenced in [src/styles.css] using following code.

  @import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-icons/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
  @import '../../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';

Adding Markdown Editor component

Modify the template in the [src/app/app.component.ts] file to render the Markdown Editor component. Add the Angular Markdown Editor by using the <ejs-richtexteditor> selector in the template section of the app.component.ts file.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, MarkdownEditorService } from '@syncfusion/ej2-angular-richtexteditor';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
@Component({
  imports: [
    RichTextEditorAllModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id='markdown-editor' [editorMode]='mode' [value]="value"></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, MarkdownEditorService]
})

export class AppComponent {
  public mode: string = 'Markdown';
  public value:string = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content. `;
}

Module Injection

To create Markdown Editor with additional features, inject the required modules. The following modules are used to extend Markdown Editor’s basic functionality.

  • MarkdownEditor - Inject this module to use Rich Text Editor as markdown editor.
  • Image - Inject this module to use image feature in Markdown Editor.
  • Link - Inject this module to use link feature in Markdown Editor.
  • Toolbar - Inject this module to use Toolbar feature.

These modules should be injected into the providers section of root NgModule or component class.

Additional feature modules are available here.

Configure the Toolbar

Configure the toolbar with custom tools using items field of toolbarSettings property in your application.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, MarkdownEditorService , HtmlEditorService, ImageService, LinkService, TableService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='markdown-editor' [editorMode]='mode' [toolbarSettings]='tools' [value]="value"></ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, MarkdownEditorService, ImageService, LinkService, TableService]
})

export class AppComponent {
    public mode: string = 'Markdown';
    public value: string =
      'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.';
  
    public tools: ToolbarSettingsModel = {
      items: [
        'Bold',
        'Italic',
        'StrikeThrough',
        'InlineCode',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        'Blockquote',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',
      ],
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Run the application

Use the following command to run the application in the browser.

ng serve --open

Retrieve the formatted content

To retrieve the editor contents, use the value property of Markdown Editor.

  let rteValue: string = this.rteObj.value;

To fetch the Markdown Editor’s text content, use getText method.

  
  let rteValue: string = this.rteObj.contentModule.getText();

Retrieve the number of characters in the Markdown Editor

To get the maximum number of characters in the Markdown Editor’s content, use getCharCount

  let rteCount: number = this.rteObj.getCharCount();

You can refer to our Angular Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Angular Markdown Editor example to knows how to render and configure the markdown editor tools.

See Also