Angular Markdown Editor (Directive)

1.1.5

What do we have?

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 AngularJS Directive call. I plan to use this mainly for online documentation but it could be useful for many other reasons (docs, blog, etc...).

Marked.js is awesome for markdown preview and Highlight.js is a must have for easiser code viewing with colors highlighting. The Bootstrap-Markdown is a really great and minimalist looking as a simplified WYSIWYG editor. This editor was simply missing an AngularJS all-in-one package and so I created a Directive to handle all of that. For all of these great tools, we will use their AngularJS version (as much as possible) for easier integration as for example Marked.js AngularJS version is Angular-Marked.

Demo

Live Plunker demo or take a look at the demo under the folder example.

Dependencies

* angular.js
* bootstrap _(we also include bootstrap.js)_
* bootstrap-markdown _(editor)_
* marked.js _(markdown preview)_
* angular-marked
* highlight.js _(code syntax highlighting)_
* angular-highlight
* jQuery _(required for Bootstrap-Markdown editor)_

How to use it?

$3

##### Bower _(angular-markdown-editor already exist on Bower, so I had to use a different name)_
``bash
bower install angular-markdown-editor-ghiscoding
`
##### NPM
`bash
npm install angular-markdown-editor
`
##### NuGet
_Some of the dependencies were added manually to this package (because they don't all exist on NuGet). For these packages, you could get them through Github and add them manually yourself or just use the one included with this package._
`bash
PM> Install-Package Angular-Markdown-Editor
`

$3

_NOTE: Unfortunately, the "highlight.js" npm module doesn't seem to have proper bundles, so it's easier for us to get the minified CSS, JS files directly from CDN where they are bundled correctly. As for the highlight styles, if you want to use another style, then you can replace the "...xxx.min.css" by the name you want to use, for example if we want to use "github", we would get "highlight.js/.../github.min.css"_
`html



`

$3


Simply create a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with an </code>ngModel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and a </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> then a call to the Directive.<br />At the end, all you need is:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><!-- editor --><br /><textarea ng-model="editor1" name="editor1" markdown-editor="" rows="10">

<-- preview... be sure to include the "angular-markdown-editor.css" style -->

`

Editor options

You can use any of the Bootstrap-Markdown Options by passing them as an object to the markdown-editor directive attribute. Like this: </p><p class="my-3">or multiple options<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><textarea markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true}"...<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Editor extra buttons</h2><br />I really thought that some buttons were missing to go a great job (~~Strikethrough~~ & <strong>Table</strong>). So I added them within the directive as an option. They are not enabled by default, so you will need to enable them manually, that is if you do want to use them. The option argument is </code>addExtraButtons<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><textarea markdown-editor="{addExtraButtons: true, 'iconlibrary': 'fa'}"...<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Event Hooks</h2><br />###### starting with Angular-Markdown-Editor version 1.1.0<br />You have access to all the <a href="http://www.codingdrama.com/bootstrap-markdown/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Bootstrap Markdown Editor available Events/Hook</a> directly in the directive</p><p class="my-3">_(*) NOTE: It seems that Bootstrap Markdown Editor haven't release any versions in a while now, however there's still lot of commits happening. If you want all the Events/Hooks to work, you will have to manually download the <a href="https://github.com/toopay/bootstrap-markdown/tree/master/js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Bootstrap Markdown Editor.js</a> file yourself._</p><p class="my-3">- onPreview<br />- onPreviewEnd (*)<br />- onSave<br />- onBlur<br />- onFocus<br />- onFullscreen<br />- onFullscreenExit (*)<br />- onChange<br />- onSelect<br />- onShow</p><p class="my-3">For example HTML<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><textarea name="editor1" class="content-box"<br /> ng-model="editor1"<br /> markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true, resize: 'vertical'}"<br /> on-fullscreen="onFullScreenCallback()"<br /> on-fullscreen-exit="onFullScreenExitCallback()"<br /> rows="10" ><br />
`
Controller
You can call any API functions defined in Markdown Editor, take a look at their API section Bootstrap Markdown Editor - API functions

`javascript
/** Markdown event hook onFullscreen, in this example we will automatically show the result preview when going in full screen
* the argument (e) is the actual Markdown object returned which help call any of API functions defined in Markdown Editor
* @param object e: Markdown Editor object
*/
$scope.onFullScreenCallback = function(e) {
e.showPreview();
}
`

External function calls through $rootScope.markdownEditorObjects


###### starting with Angular-Markdown-Editor version 1.1.0
For conveniencies and for possible external function calls, Angular-Markdown-Editor saves each of the Markdown Editors inside $rootScope.markdownEditorObjects[editorName]. This basically means that on any defined editor, we could call some of the Bootstrap Markdown Editor - API functions.

This varies with previous subject of (Event Hooks), since using the $rootScope.markdownEditorObjects can be called at any time and makes perfect sense on buttons that are outside of the editor. Take for example an external button for a Full Screen Preview as it is shown in code below.

For example HTML
`html
Full Screen Preview
`

Controller
`javascript
/**
* For some convenience, Angular-Markdown-Editor Directive also save each Markdown Editor inside $rootScope
* Each of editor object are available through their $rootScope.markdownEditorObjects[editorName]
*
* Example:
* We would then call our object through $rootScope.markdownEditorObjects.editor1
*/
$scope.fullScreenPreview = function() {
$rootScope.markdownEditorObjects.editor1.showPreview();
$rootScope.markdownEditorObjects.editor1.setFullscreen(true);
}
``

##License
MIT License

Preview

!Login Page