Angular for simplemde(Markdown Editor)
simplemde
, About angular version for @ng-util/markdownAngular for simplemde, better use ng-zorro-antd components.
ngx-simplemde
from npm
yarn add ngx-simplemde --save
SimplemdeModule
in to your root AppModule
.import { SimplemdeModule } from 'ngx-simplemde';
@NgModule({
imports: [
BrowserModule,
SimplemdeModule.forRoot({
// Global options
options: {
autosave: { enabled: true, uniqueId: 'MyUniqueID' },
},
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
simplemde-antd.min.js
and styles to angular.json
."styles": [
"src/styles.less"
],
"scripts": [
"node_modules/simplemde-antd/dist/simplemde.min.js"
]
// src/style.less
@import '~ngx-simplemde/index.less';
// Change existing parameters here:
@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r';
@simplemde-statusbar-lines: 'Lins:';
@simplemde-statusbar-words: 'words:';
@simplemde-statusbar-characters: '字符:';
@simplemde-statusbar-counts: '字数:';
NOTICE: If you need to deploy ICON offline, download and change
@simplemde-icon-url
the path.
import { Component, ViewChild, OnInit } from '@angular/core';
import { SimplemdeComponent, SimplemdeOptions } from 'ngx-simplemde';
@Component({
selector: 'app-root',
template: `
<simplemde [(ngModel)]="demo" [disabled]="false"></simplemde>
<simplemde #simplemde [(ngModel)]="customize" [options]="options"></simplemde>
`,
})
export class AppComponent implements OnInit {
@ViewChild('simplemde', { static: true }) private readonly simplemde: SimplemdeComponent;
options: SimplemdeOptions = {
toolbar: ['bold', 'italic', 'heading', '|', 'quote']
};
ngOnInit(): void {
this.simplemde.setOptions('lineNumbers', true);
}
}
Please follow this guidelines when reporting bugs and feature requests:
Thanks for understanding!
The MIT License (see the LICENSE file for the full text)