ng-util
@ng-util/markdown
Vditor for Angular.
Demo
Usage
Installation
Install from npm repository:
npm install @ng-util/markdown --saveSimple
Standalone
import { Component } from '@angular/core';
import { NuMonacoEditorComponent } from '@ng-util/monaco-editor';
@Component({
selector: 'demo',
template: `
<nu-monaco-editor />
`,
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
| Property | Description | Type | Default |
|---|---|---|---|
[options] |
Equar IOptions | any |
- |
[disabled] |
Disabled of markdown editor | boolean |
false |
[delay] |
Delay init monaco editor, unit: ms | number |
0 |
(ready) |
Ready event | EventEmitter<any> |
- |
nu-markdown-preview
| Property | Description | Type | Default |
|---|---|---|---|
[options] |
Equar IOptions | any |
- |
[delay] |
Delay init monaco editor, unit: ms | number |
0 |
(ready) |
Ready event | EventEmitter<string> |
- |
License
The MIT License (see the LICENSE file for the full text)