Ngx Simplemde Save Abandoned

Angular for simplemde(Markdown Editor)

Project README

I recommend using Vditor instead of simplemde, About angular version for @ng-util/markdown

ngx-simplemde

Angular for simplemde, better use ng-zorro-antd components.

NPM version Ci

Usage & Demo

Installation instructions

  1. Install ngx-simplemde from npm
yarn add ngx-simplemde --save
  1. Import the 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 { }
  1. Add simplemde-antd.min.js and styles to angular.json.
"styles": [
  "src/styles.less"
],
"scripts": [
  "node_modules/simplemde-antd/dist/simplemde.min.js"
]
  1. Add simplemde style.
// 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.

  1. Happy coding.
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);
  }  
}

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

Open Source Agenda is not affiliated with "Ngx Simplemde" Project. README Source: cipchk/ngx-simplemde
Stars
36
Open Issues
6
Last Commit
2 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating