ngx-easymde

ngx-easymde

An Angular wrapper for the Easy MarkDown Editor originally derived from Angular for simplemde(Markdown Editor) by 卡色 cipchk.

Usage & Demo

• Live Demo
• Stackblitz

Installation instructions

1. Install ngx-easymde from npm

   npm add ngx-easymde --save
   

2. Import the EasymdeModule into your root AppModule (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 },
         },
       }),
   

3. Add easymde.min.js and styles to angular.json.

   "styles": [
     "node_modules/easymde/dist/easymde.min.css",
     "src/styles.scss"
   ],
   "scripts": [
     "node_modules/easymde/dist/easymde.min.js"
   ]
   

4. 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 ：';
   

5. 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:

1. Use GitHub Issues board to report bugs and feature requests; we will not respond to email submissions.
2. 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.