In this package we will use a few libraries and tools to make a more convenient "all in one" WYSIWYG Markdown Editor with preview. All of that with a simple Angular Component. This can be useful for online documentation and many other reasons (docs, blog, ...).
Here is the list of dependencies, which are required
- Bootstrap-Markdown (editor) itself
- jQuery (required for Bootstrap-Markdown editor)
- Bootstrap 3.x.
- If anyone needs
Bootstrap 4support and has time to add the necessary code, PR (Pull Request) are certainly welcome.
- If anyone needs
It's nice to have but not a deep dependencies, which is the ngx-markdown lib. It is used in the demo of this lib, but technically you could plug any other lib you wish for dealing with the markdown preview.
Angular-Markdown-Editor on NPM
Install through NPM or Yarn
npm install angular-markdown-editor
# or with Yarn
yarn add angular-markdown-editorYou need to add CSS Styles for the Bootstrap, Markdown Editor and Font-Awesome (the latter is optional).
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap-markdown/js/bootstrap-markdown.js"
],Prism.js uses separate javascript file for each language, so you'll need to add them yourself.
For example, below we are adding the highlight for C#, JavaScript and TypeScript:
"styles": [
"../node_modules/prismjs/themes/prism.css"
],
"scripts": [
"../node_modules/prismjs/prism.js",
"../node_modules/prismjs/components/prism-css.min.js",
"../node_modules/prismjs/components/prism-javascript.min.js",
"../node_modules/prismjs/components/prism-typescript.min.js"
],You can pass the following input attribute:
| attribute | type | requried | comments |
|---|---|---|---|
| textareaId | string | yes | id of the textarea DOM element used by the lib |
| rows | number | no | number of rows for the textarea, defaults to 10 |
| options | mixed | no | markdown Editor Options to pass to the element |
The library comes with it's own Global Editor Options, these propertoes can be overriden at any by the options attribute. Click to see the Global Options defined.
You can hook to any of the Bootstrap Markdown Editor Events through 2 ways, just choose the one you prefer:
Each of the events are available in the View from a Custom Event as (onX)="doSomething()", for example:
<angular-markdown-editor
textareaId="editor1" rows="12"
name="markdownText" [(ngModel)]="markdownText"
(onFullscreenExit)="hidePreview()">
</angular-markdown-editor>export class MyComponent {
hidePreview() { console.log(e.getContent()); }
}You can also pass the Event returned by the Editor via $event.detail.eventData
<angular-markdown-editor
textareaId="editor1" rows="12"
name="markdownText" [(ngModel)]="markdownText"
(onChange)="onChange($event.detail.eventData)">
</angular-markdown-editor>export class MyComponent {
ngOnInit() {
onChange(e) { console.log(e.getContent()); }
}
}The second way is to use the callback directly when defining the Editor Options.
<angular-markdown-editor
textareaId="editor1" rows="12"
name="markdownText" [(ngModel)]="markdownText"
[options]="editorOptions">
</angular-markdown-editor>import { EditorOption } from 'angular-markdown-editor';
export class MyComponent {
ngOnInit() {
this.editorOptions: EditorOption = {
iconlibrary: 'fa',
onChange: (e) => console.log(e.getContent()),
onFullscreenExit: () => this.hidePreview()
};
}
}- onPreview
- onPreviewEnd
- onSave
- onBlur
- onFocus
- onFullscreen
- onFullscreenExit
- onChange
- onSelect
- onShow
The editor API is quite dense and I will not list the entire set o
8000
f methods, but you can see the entire list here.
To call any of the Editor Methods, you will have to first get a reference to the Editor's instance which you can get from the onShow callback.
Get the Editor's instance through the onShow, via the Custom Event (from the View) or Editor Option callback (just choose the one you prefer). Below shows how to get it through the latter option.
<button (click)="showFullScreen()">Show Full Screen</button>
<angular-markdown-editor
textareaId="editor1" rows="12"
name="markdownText" [(ngModel)]="markdownText"
[options]="editorOptions">
</angular-markdown-editor>import { EditorInstance, EditorOption } from 'angular-markdown-editor';
export class MyComponent {
bsEditorInstance: EditorInstance;
ngOnInit() {
this.editorOptions = {
iconlibrary: 'fa',
onShow: (e) => this.bsEditorInstance = e
};
}
showFullScreen() {
this.bsEditorInstance.setFullscreen(true);
}
}You like and use this great library Angular-Markdown-Editor? You can always upvote ⭐ and/or contribute :)
If you like my work, you can also support me with caffeine 😄 Buy Me a Coffee
