Awesome
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>
- The final options is
{...$options1, ...$options2}
,Object.assign({}, $options1, $options2)
- The
element
option is not usefulcodemirror
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 https://github.com/angular/angular-cli/issues/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