npmpackage.info

Gathering detailed insights and metrics for ngx-markdown-editor

Other packages similar to ngx-markdown-editor

ngx-stackedit

1.1.73

FOSS WYSIWYG Markdown editor.

@ymchun/ngx-markdown-editor

2.0.0-beta.7

A simple markdown editor component for Angular

ngx-markdown-editor-telegram

2.4.10

Angular markdown editor based on ace editor - fork to support telegram flavours

ngx-stacks-editor

0.0.1

An Angular wrapper for the Stacks Editor by StackOverflow

Gathering detailed insights and metrics for ngx-markdown-editor

ngx-markdown-editor - 5.3.4 | npmpackage.info

ngx-markdown-editor

Angular markdown editor based on ace editor

5.3.4

178

Apache-2.0

TypeScript

442.72 kB

1.9

Installations

npm install ngx-markdown-editor

Developer Guide

BETA

Typescript

No

Module System

CommonJS, ESM

Node Version

18.15.0

NPM Version

9.8.1 Pull Requests

Open

5

Total

62

Closed

37

Merged

20

Issues

Open

2

Total

97

Closed

95

Releases

Unable to fetch releases

Languages

TypeScript

HTML

SCSS

TypeScript (77.59%)

HTML (13.46%)

SCSS (8.95%)

Developer

lon-yang

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

178 Stars

129 Commits

48 Forks

3 Watchers

6 Branches

8 Contributors

Updated on Jun 09, 2025

Maintainers

View All 8 Contributors

Package Meta Information

Latest Version

5.3.4

Package Id

ngx-markdown-editor@5.3.4

Unpacked Size

442.72 kB

Size

107.00 kB

File Count

NPM Version

9.8.1

Node Version

18.15.0

Published on

Oct 19, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

ace-builds bootstrap font-awesome

ngx-markdown-editor

Angular markdown editor based on ace editor

GitHub issues

Online Demo

Usage

Installation

Install dependencies from npm repository:

1npm i ace-builds bootstrap font-awesome

Install ngx-markdown-editor from npm repository:

1npm i ngx-markdown-editor

Add the assets、styles and scripts in angular.json:

1{
2  ...
3  "architect": {
4    "build": {
5      "options": {
6        ...
7        "assets": [
8          {
9            "glob": "**/*",
10            "input": "node_modules/ace-builds/src-min",
11            "output": "./assets/ace-builds/"
12          }
13        ],
14        "styles": [
15          "node_modules/bootstrap/dist/css/bootstrap.min.css",
16          "node_modules/font-awesome/css/font-awesome.min.css",
17          "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
18        ],
19        "scripts": [
20          "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
21          "node_modules/ngx-markdown-editor/assets/marked.min.js"
22        ]
23        ...
24      }
25    }
26  }
27  ...    
28}

Add ace.js in index.html

1<html>
2  <head>
3    <script src="/assets/ace-builds/ace.js"></script>
4  </head>
5  <body></body>
6</html>

<=2.5.0

Install dependencies from npm repository:

1npm i brace bootstrap font-awesome

Install ngx-markdown-editor from npm repository:

1npm i ngx-markdown-editor

Add the styles and scripts in angular.json:

1{
2  ...
3  "architect": {
4    "build": {
5      "options": {
6        ...
7        "styles": [
8          "node_modules/bootstrap/dist/css/bootstrap.min.css",
9          "node_modules/font-awesome/css/font-awesome.min.css",
10          "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
11        ],
12        "scripts": [
13          "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
14          "node_modules/ngx-markdown-editor/assets/marked.min.js"
15        ]
16        ...
17      }
18    }
19  }
20  ...    
21}

Import brace in polyfills.ts

1import 'brace';
2import 'brace/mode/markdown';

Sample

1import { LMarkdownEditorModule } from 'ngx-markdown-editor';
2
3@NgModule({
4  declarations: [
5    AppComponent
6  ],
7  imports: [
8    BrowserModule,
9    FormsModule, // make sure FormsModule is imported to make ngModel work
10    LMarkdownEditorModule
11  ],
12  providers: [],
13  bootstrap: [AppComponent]
14})
15export class AppModule { }

1<md-editor name="Content" 
2  [upload]="doUpload" 
3  [preRender]="preRenderFunc" 
4  [postRender]="postRenderFunc"
5  [(ngModel)]="content" 
6  [height]="'200px'" 
7  [mode]="mode" 
8  [options]="options" 
9  (onEditorLoaded)="onEditorLoaded($event)"
10  (onPreviewDomChanged)="onPreviewDomChanged($event)"
11  required 
12  maxlength="500">
13  <slot custom-btns></slot>
14</md-editor>

Options

ngModel: markdown original content
height: editor height
hideToolbar: hide toolbar, default is false
mode: editor | preview, default is editor

options: other settings for editor

1{  
2  showPreviewPanel?: boolean    // Show preview panel, Default is true
3  showBorder?: boolean          // Show editor component's border. Default is true
4  hideIcons?: Array<string>     // ['Bold', 'Italic', 'Heading', 'Reference', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']. Default is empty
5  usingFontAwesome5?: boolean   // Using font awesome with version 5, Default is false
6  fontAwesomeVersion?: '4' | '5' | '6'   // FontAwesome Version, 4/5/6, default is 4
7  scrollPastEnd?: number        // The option for ace editor. Default is 0
8  enablePreviewContentClick?: boolean  // Allow user fire the click event on the preview panel, like href etc. Default is false
9  resizable?: boolean           // Allow resize the editor
10  markedjsOpt?: MarkedjsOption  // The markedjs option, see https://marked.js.org/#/USING_ADVANCED.md#options
11  customRender?: {              // Custom markedjs render
12    image?: Function     // Image Render
13    table?: Function     // Table Render
14    code?: Function      // Code Render
15    listitem?: Function  // Listitem Render
16  },
17  customIcons?: {               // Custom icons in toolbar, default using font-awesome 4.x
18    Bold?: CustomIcon;
19    Italic?: CustomIcon;
20    Heading?: CustomIcon;
21    Reference?: CustomIcon;
22    Link?: CustomIcon;
23    Image?: CustomIcon;
24    UnorderedList?: CustomIcon;
25    OrderedList?: CustomIcon;
26    CodeBlock?: CustomIcon;
27    ShowPreview?: CustomIcon;
28    HidePreview?: CustomIcon;
29    FullScreen?: CustomIcon;
30    CheckBox_UnChecked?: CustomIcon;
31    CheckBox_Checked?: CustomIcon;
32  };
33  placeholder?: string
34}

upload(Function): For #24, upload file by yourself

1constructor() {
2  this.doUpload = this.doUpload.bind(this);  // This is very important.
3}
4
5doUpload(files: Array<File>): Promise<Array<UploadResult>> {
6  // do upload file by yourself
7  return Promise.resolve([{ name: 'xxx', url: 'xxx.png', isImg: true }]);
8}
9
10interface UploadResult {
11  isImg: boolean
12  name: string
13  url: string
14}

preRender(Function): For #13, this will not effect ngModel's value, just rendered value

1preRenderFunc(content: string) {
2  return content.replace(/something/g, 'new value'); // must return a string
3}

postRender(Function): Change the html souce code generated by marked before update the dom

1postRenderFunc(content: string) {
2  return content.replace(/something/g, 'new value'); // must return a string
3}

required: for form validate
maxlength: for form validate

Tips: For Function input, please call bind at constructor to assign correct this pointer

Event

onEditorLoaded: EventEmitter<AceEditor> Fires when the ace editor loaded.
onPreviewDomChanged: EventEmitter<HTMLElement> Fires when the preview dom updated

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More