Skip to content

doxiaodong/ng2-simplemde

Repository files navigation

Build Status Downloads Versions License

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