yvahajatiana / ng2-simplemde-angular14

angular2 component of https://github.com/sparksuite/simplemde-markdown-editor

simplemde-markdown-editor with Angular

demo

https://doxiaodong.github.io/ng2-simplemde

Usage

• install npm i ng2-simplemde --save

import { NgModule } from '@angular/core'
import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde'
@NgModule({
  imports: [
    SimplemdeModule.forRoot({
      provide: SIMPLEMDE_CONFIG,
      // config options 1
      useValue: $options1
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!-- config options 2 -->
<simplemde [(ngModel)]="value" [options]="$options2" [codemirror]="{ lineNumbers: true }"></simplemde>

1. The final options is {...$options1, ...$options2}, Object.assign({}, $options1, $options2)
2. The element option is not useful
3. codemirror is option set for codemirror, see https://github.com/codemirror/CodeMirror

Webpack

• you should add style-loader!css-loader in your webpack config
• If you use angular-cli, you can add style-loader!css-loader as pug-loader in angular/angular-cli#1886.

Style

• normal, it use import 'simplemde/dist/simplemde.min.css'
• you can use a cdn

import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde/no-style'

and in index.html

<link href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css" rel="stylesheet">

• Bundles use don't support this