- Setup Angular Environment
- Create an Angular Application
- Adding Syncfusion Rich Text Edior package
- Adding CSS reference
- Adding Markdown Editor component
- Module Injection
- Configure the Toolbar
- Run the application
- Retrieve the formatted content
- Retrieve the number of characters in the Markdown Editor
- See Also
Contact Support
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.
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.