Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
angular-markdown-editor
Advanced tools
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, ...).
You like to use Angular-Markdown-Editor? Be sure to upvote :star: the, also maybe support me with cafeine :coffee: and feel free to contribute. 👷👷♀️
1.x
for AngularJS 1.x (EOL)2.x
for Angular >= 4.x
3.x
for Angular >= 14.x
Here is the list of required dependencies
It's a "nice to have" extra but not a hard 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-editor
angular.json
fileYou need to add CSS Styles for the Bootstrap, Markdown Editor and Font-Awesome v4.7.
Also make sure to include the proper 3rd party javascript libraries in your scripts
as shown below.
"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"
],
ngx-markdown
and/or Prism.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"
],
import { AngularMarkdownEditorModule } from 'angular-markdown-editor';
@NgModule({
declarations: [],
imports: [AngularMarkdownEditorModule]
// or pre-define global configuration using the forRoot
// imports: [AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })]
});
You can pass the following input attribute:
attribute | type | required | 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 |
locale | EditorLocale | no | locale set that has a language and dictionary that can be added as an alternative language. Can be 1 or more dictionaries |
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 {
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 of methods, but you can see the entire list from the Editor Method Interface.
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);
}
}
For the "Preview" button to work, you will need to provide a parser
to the Editor Options. This lib has no deep dependencies to any Markdown Parser (you could use marked.js
or any other parser). But assuming we are using ngx-markdown
, we can add the parser this way:
import { MarkdownService } from 'ngx-markdown';
export class TestComponent implements OnInit {
constructor(private markdownService: MarkdownService) {}
ngOnInit() {
this.editorOptions = {
parser: (val) => this.markdownService.parse(val.trim())
};
}
}
If you want to use this package for any type of users, you should consider sanatizing your data for Cross Site Scripting (XSS) attack. A good package to use for sanitizing is DOMPurify and you should sanitize your data when calling the parser
as shown below. Also if you have any Markdown Preview, remember to sanitize them as well probably via the form input or control.
this.editorOptions = {
parser: (val: string) => {
const sanitizedText = DOMPurify.sanitize(val.trim());
this.markdownService.parse(sanitizedText);
}
};
I really thought that some buttons were missing to go a great job (Strikethrough & Table). So I added them directly in the Global Options. If you want to add your own, then just look at how it was done in the Global Options and read the section additionalButtons
of Bootstrap Markdown website.
You can add a locale to the editor but passing a locale
object (and bind it in the View) which contain a language
and the dictionary of words used by the editor. The entire list of words can be seen in the example below. So for example, if we want to add French locale, we will do the following (you can see demo code):
<button (click)="showFullScreen()">Show Full Screen</button>
<angular-markdown-editor
textareaId="editor1" rows="12"
name="markdownText" [(ngModel)]="markdownText"
[locale]="locale"
[options]="editorOptions">
</angular-markdown-editor>
import { EditorInstance, EditorLocale, EditorOption } from 'angular-markdown-editor';
export class MyComponent {
locale: EditorLocale = {
language: 'fr',
dictionary: {
'Bold': 'Gras',
'Italic': 'Italique',
'Heading': 'Titre',
'URL/Link': 'Insérer un lien HTTP',
'Image': 'Insérer une image',
'List': 'Liste à puces',
'Ordered List': 'Liste ordonnée',
'Unordered List': 'Liste non-ordonnée',
'Code': 'Code',
'Quote': 'Citation',
'Preview': 'Prévisualiser',
'Strikethrough': 'Caractères barrés',
'Table': 'Table',
'strong text': 'texte important',
'emphasized text': 'texte souligné',
'heading text': 'texte d\'entête',
'enter link description here': 'entrez la description du lien ici',
'Insert Hyperlink': 'Insérez le lien hypertexte',
'enter image description here': 'entrez la description de l\'image ici',
'Insert Image Hyperlink': 'Insérez le lien hypertexte de l\'image',
'enter image title here': 'entrez le titre de l\'image ici',
'list text here': 'texte à puce ici'
}
};
// if you want to pass multiple locales, just pass it as an array
/*
locale: EditorLocale[] = [
{ language: 'fr', dictionary: { 'Bold': 'Gras', ...
{ language: 'en', dictionary: { 'Bold': 'Bold', ...
];
*/
ngOnInit() {
this.editorOptions = {
language: 'fr', // also set the language option to French
onShow: (e) => this.bsEditorInstance = e
};
}
}
Note I could not find a way to change the language dynamically, so it seems that we would have to destroy the component and re-create it for switching the language/locale.
FAQs
Bootstrap Markdown components made available in Angular
We found that angular-markdown-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.