ngx-simplemde-wrapper
A lightweight Angular wrapper around simplemde.
What is SimpleMDE - Markdown Editor?
A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking.
Demo
Installation
NPM Package: ngx-simplemde-wrapper on NPM
-
Install through NPM
npm i ngx-simplemde-wrapper -
Modify the
angular.json
fileYou need to add CSS Styles for the simplemde (Required). Also, make sure to include the simplemde javascript library in your scripts as shown below.
"styles":,"scripts":, -
Import Module
;Optional: pre-define global configuration using
initialize()
;;
Usage
Simply add a textarea
tag to the component's html file, then bind it to the SimpleMDE
directive as follows:
Where,
-
(SimpleMDE)
is used to listen to changes made to the simpleMDE textarea and assign the changes to the model. Alternatively, any method can be executed on changes as follows.(SimpleMDE)="onChanges($event)"On the
.ts
file we can define theonChanges()
method.onChanges$event: string -
[SimpleMDE]
is used to reflect changes to the model that are made programmatically outside the editor on the simpleMDE textarea. Additionally, if the model had an initial value assigned to it, the simpleMDE textarea will be initialized with that value. -
[options]
is an optional input to the directive that can be used to override the pre-defined global configurations (or the default simpleMDE options if no pre-defined configurations were provided) for each textarea.
Configurations
The SimpleMDE - Markdown Editor comes with default configurations. There are two ways these configurations can be overridden:
- Globally for the entire module by passing the config object to
initialize()
, as explained in the Installation section. - Individually for each textarea using the
[options]
directive input, as explained in the Usage section.
More about the config object:
The config object should be of type SimpleMdEOptions
. All the configurations supported by the SimpleMDE can be used with the SimpleMdEOptions interface.
For example:
;
Troubleshooting
Please follow the following guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address). Please always write steps to reproduce the error.
All and any feedback is welcomed - this is my first NPM pacakage, please be kind :)
Thanks for understanding!
License
The MIT License (see the LICENSE file for the full text)
Development Notes
This project was generated with Angular CLI version 10.0.5.