This is a angular wrapper for [SimpleMDE](https://github.com/sparksuite/simplemde-markdown-editor).
This is a angular wrapper for SimpleMDE.
`` bash`
npm install simplemde angular-simplemde
Then import AngularSimplemdeModule in your central module.
Finally, your project should import node_modules/simplemde/dist/simepmde.min.css. If you are using Angular CLI, this can angular.json
be done in like this:
``
// ...
"styles": [
// other styles...
"node_modules/simplemde/dist/simplemde.min.css"
],
// ...
Or load the SimpleMde stylesheets via the style.scss/css:
`css`
@import "~simplemde/dist/simplemde.min.css";
For the simplest use-case, just use the component like this
`html`
If you want to customize the configuration, initialize a ISimpleMdeConfig in your component:
`typescript
import { Component } from '@angular/core';
import { DefaultActions, ISimpleMdeConfig } from 'projects/angular-simplemde/src/lib/editor/editor-config.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'editor-demo';
editorInput = 'test text';
config: ISimpleMdeConfig = {
actions: DefaultActions,
};
}
`
and link it in the template:
`html`
In case you want to react explicitly on change events on the input, use the (inputChange) directive:
`html`
This library defines several default toolbar actions, such as DefaultActions, which consist of more categorized
toolbar actions for text formatting, tables and more.
Additionally, in case you want to embed some special actions inside the default, you can use the EmbedCustomActionsInDefault()
function helper.
`typescript
config: ISimpleMdeConfig = {
actions: EmbedCustomActionsInDefault([
{
name: 'upper-case',
title: 'Convert to Upper Case',
icon: 'fa-text-height',
action: text => text.toUpperCase()
}
]),
};
`
Hint: use lambdas instead of full function definitions, if you want to keep the this scope to your component.
If your action works with asynchronous functions, you can return an Observable