18.1.0 • Published 2 months ago

@ng-util/markdown v18.1.0

Weekly downloads
10
License
MIT
Repository
github
Last release
2 months ago

@ng-util/markdown

Vditor for Angular.

NPM version Build Status codecov Dependency Status prettier GitHub license

Demo

Usage

Installation

Install from npm repository:

npm install @ng-util/markdown --save

Simple

Standalone

import { Component } from '@angular/core';
import { NuMonacoEditorComponent } from '@ng-util/monaco-editor';

@Component({
  selector: 'demo',
  template: `
    <nu-monaco-editor />
  `,
  standalone: true,
  imports: [NuMonacoEditorComponent],
})
export class MonacoDemo { }

Module

Include NuMarkdownModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):

import { NgModule } from '@angular/core';
import { NuMarkdownModule } from '@ng-util/markdown';

@NgModule({
  imports: [
    NuMarkdownModule // And use `provideNuMarkdownConfig` to modify the global configuration
  ],
})
export class AppModule { }

Create markdown options in component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<nu-markdown [(ngModel)]="value"></nu-markdown>`,
})
export class DemoComponent {
  value = '# Title';
}

Preview

You can use nu-markdown-preview component to render a Markdown preview effect (no editing).

<nu-markdown-preview value="# Title"></nu-markdown-preview>

How to change cdn?

  • If using standalone use provideNuMarkdownConfig({ libs: [] }) to adjust.
  • If using module, use NuMarkdownModule.forRoot({ libs: [] }) to adjust.

The libs parameter should contain index.min.js and index.css, like this:

provideNuMarkdownConfig({ 
  libs: [
    'https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js',
    'https://cdn.jsdelivr.net/npm/vditor/dist/index.css'
  ]
})

In addition, You can also use local path:

// angular.json
{
  "glob": "*.(js|css)",
  "input": "node_modules/vditor/dist",
  "output": "/assets/vditor/"
}

Then modify the libs path:

provideNuMarkdownConfig({ 
  libs: [
    './assets/vditor/index.min.js',
    './assets/vditor/index.css'
  ]
})

API

nu-markdown

PropertyDescriptionTypeDefault
[options]Equar IOptionsany-
[disabled]Disabled of markdown editorbooleanfalse
[delay]Delay init monaco editor, unit: msnumber0
(ready)Ready eventEventEmitter<any>-

nu-markdown-preview

PropertyDescriptionTypeDefault
[options]Equar IOptionsany-
[delay]Delay init monaco editor, unit: msnumber0
(ready)Ready eventEventEmitter<string>-

License

The MIT License (see the LICENSE file for the full text)

18.1.0

2 months ago

18.0.0

6 months ago

17.0.0-rc.0

1 year ago

17.0.1

1 year ago

17.0.0

1 year ago

16.0.1

1 year ago

16.0.0

2 years ago

15.0.0

2 years ago

14.0.1

2 years ago

14.0.0

3 years ago

13.1.0

3 years ago

13.0.0

3 years ago

12.1.2

3 years ago

12.1.0

3 years ago

12.1.1

3 years ago

12.0.0

4 years ago

11.2.0

4 years ago

11.1.1

4 years ago

11.1.0

4 years ago

11.0.0

4 years ago

10.2.2

4 years ago

10.2.0

4 years ago

10.2.1

4 years ago

10.1.1

4 years ago

10.1.0

4 years ago

10.1.0-rc.2

4 years ago

10.1.0-rc.1

4 years ago