ngx-easymde
v0.3.2
Published
Angular for easymde
Downloads
457
Maintainers
Readme
ngx-easymde
An Angular wrapper for the Easy MarkDown Editor originally derived from Angular for simplemde(Markdown Editor) by 卡色 cipchk.
Usage & Demo
Installation instructions
Install
ngx-easymde
fromnpm
npm add ngx-easymde --save
Import the
EasymdeModule
into your rootAppModule
(app.module.ts
).import { EasymdeModule } from 'ngx-easymde'; @NgModule({ imports: [ BrowserModule, EasymdeModule.forRoot() ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
To set global options, pass them to the
forRoot
function.EasymdeModule.forRoot({ options: { autosave: { enabled: true, delay: 10000 }, hideIcons: ['side-by-side'], renderingConfig: { codeSyntaxHighlighting: true }, }, }),
Add
easymde.min.js
and styles toangular.json
."styles": [ "node_modules/easymde/dist/easymde.min.css", "src/styles.scss" ], "scripts": [ "node_modules/easymde/dist/easymde.min.js" ]
Add easymde style.
// src/style.scss @import '~ngx-easymde/lib/index.scss'; // Change existing parameters here: @easymde-icon-url: 'icons.zip'; @easymde-statusbar-lines: 'lines:'; @easymde-statusbar-words: 'words:'; @easymde-statusbar-characters: 'chars :'; @easymde-statusbar-counts: 'count :';
Enjoy!
import { Component, ViewChild, OnInit } from '@angular/core'; import { EasymdeComponent, EasymdeOptions } from 'ngx-easymde'; @Component({ selector: 'app-root', template: ` <easymde [(ngModel)]="demo" [disabled]="false"></easymde> <easymde #easymde [(ngModel)]="customize" [options]="options"></easymde> `, }) export class AppComponent implements OnInit { @ViewChild('easymde', { static: true }) private readonly easymde: EasymdeComponent; options: EasymdeOptions = { toolbar: ['bold', 'italic', 'heading', '|', 'quote'] }; ngOnInit(): void { this.easymde.setOptions('lineNumbers', true); } }
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests; we will not respond to email submissions.
- Please always provide the steps to reproduce the error. That way we can focus on fixing the bug, not trying to reproduce it.
Thanks for understanding!
MIT License
See the LICENSE file for the full text.