Ngx Markdown Editor 使用教程

Ngx Markdown Editor 使用教程

ngx-markdown-editorAngular markdown editor based on ace editor 项目地址:https://gitcode.com/gh_mirrors/ng/ngx-markdown-editor

1. 项目介绍

Ngx Markdown Editor 是一个基于 Angular 的 Markdown 编辑器组件，支持双向绑定，能够方便地在 Angular 项目中集成 Markdown 编辑功能。该项目利用 Ngx Markdown 库实现预览功能，并提供了丰富的配置选项，使得开发者可以根据需求自定义编辑器的外观和行为。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Angular CLI。然后，通过 npm 安装 ngx-markdown-editor：

npm install ngx-markdown-editor --save

配置模块

在你的 Angular 项目中，导入 MarkdownEditorModule 并进行配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MarkdownEditorModule } from 'ngx-markdown-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MarkdownEditorModule.forRoot({
      previewConfig: {
        sanitize: false,
        markedOptions: {
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false
        }
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用组件

在你的组件模板中使用 ngx-markdown-editor 组件：

<ngx-markdown-editor [(ngModel)]="markdownContent"></ngx-markdown-editor>

在组件的 TypeScript 文件中定义 markdownContent：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  markdownContent = '# Hello, Ngx Markdown Editor!';
}

运行项目

最后，运行你的 Angular 项目：

ng serve

3. 应用案例和最佳实践

自定义主题

你可以通过导入主题文件并应用 Material 样式来自定义编辑器的外观：

@import '~ngx-markdown-editor/themes/material';
@include mde-material(mat-color($your-primary-color));

动态配置

所有编辑器的配置都可以通过输入绑定动态完成。例如，设置编辑器的高度：

<ngx-markdown-editor [(ngModel)]="markdownContent" [minHeight]="100" [maxHeight]="500"></ngx-markdown-editor>

4. 典型生态项目

Ngx Markdown

Ngx Markdown 是一个用于解析和渲染 Markdown 的 Angular 库，与 Ngx Markdown Editor 紧密集成，提供了强大的 Markdown 处理能力。

Angular Material

Angular Material 提供了丰富的 UI 组件库，可以与 Ngx Markdown Editor 结合使用，进一步提升用户体验。

通过以上步骤，你可以在 Angular 项目中快速集成并使用 Ngx Markdown Editor，实现强大的 Markdown 编辑功能。

ngx-markdown-editorAngular markdown editor based on ace editor 项目地址:https://gitcode.com/gh_mirrors/ng/ngx-markdown-editor