angular-markdown-editor
Advanced tools
Comparing version 1.0.0 to 1.0.1
{ | ||
"name": "angular-markdown-editor", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"author": "Ghislain B.", | ||
@@ -5,0 +5,0 @@ "description": "Angular Markdown Editor, all-in-one Markdown Editor and Preview", |
# Angular Markdown Editor (Directive) | ||
`1.0.0` | ||
`1.0.1` | ||
## What do we have? | ||
I have put together a few libraries and tools to make a convenient all in one WYSIWYG Markdown Editor and 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. Also planning to add a 1-click button for simple copy+paste to email. | ||
I have put together a few libraries and tools to make a convenient "all in one" WYSIWYG Markdown Editor and 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. Also planning to add a 1-click button for simple Copy+Paste to email. | ||
@@ -10,3 +10,14 @@ [Marked.js](https://github.com/chjj/marked) is awesome for markdown preview and [Highlight.js](https://highlightjs.org/) is a must for easy code viewing with colors highlighting. The [Bootstrap-Markdown](http://www.codingdrama.com/bootstrap-markdown/) is a really great and simplified WYSIWYG editor which was simply missing integration with AngularJS and so I created a Directive to handle that. For all of these great tools, we will use their AngularJS version for easier integration (for example `Marked.js` and `Angular-Marked`) | ||
## How to use it? | ||
### Creation | ||
### Installation | ||
##### NPM | ||
```bash | ||
npm install angular-markdown-editor | ||
``` | ||
##### NuGet | ||
_Some of the dependencies were added by hand to this package (because they don't all exist on NuGet). For those, you could get latest version and install them yourself as well._ | ||
```bash | ||
PM> Install-Package Angular-Markdown-Editor | ||
``` | ||
### Inside the HTML | ||
Simply create a `<textarea>` with an `ngModel` and a call to the Directive. | ||
@@ -18,4 +29,4 @@ At the end, all you need is: | ||
### Extra options | ||
You can also pass any options from the [Bootstrap-Markdown](http://www.codingdrama.com/bootstrap-markdown/) by passing these options as an object to the directive. | ||
### Extra options (Bootstrap-Markdown) | ||
You can use any of the [Bootstrap-Markdown Options](http://www.codingdrama.com/bootstrap-markdown/) by passing them as an object to the `markdown-editor` directive attribute. | ||
Like this: `<textarea markdown-editor="{'iconlibrary': 'fa'}"...` | ||
@@ -28,4 +39,4 @@ | ||
### Additional extra buttons | ||
I really thought that some buttons were missing to go a great job (Strikethrough & Table). So I added them to the directive, though they are not enabled by default, you need to enable them manually if you want them or not. | ||
### Editor extra buttons | ||
I really thought that some buttons were missing to go a great job (Strikethrough & Table). So I added them to the directive, they are not enabled by default, so you will need to enable them manually if you do want to use them. | ||
Like this: | ||
@@ -37,20 +48,15 @@ ``` | ||
## 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)_ | ||
* [angular.js](https://www.angularjs.org/) | ||
* [bootstrap](http://getbootstrap.com/) _(we also include bootstrap.js)_ | ||
* [bootstrap-markdown](http://www.codingdrama.com/bootstrap-markdown/) _(editor)_ | ||
* [marked.js](https://github.com/chjj/marked) _(markdown preview)_ | ||
* [angular-marked](https://github.com/Hypercubed/angular-marked) | ||
* [highlight.js](https://highlightjs.org/) _(code syntax highlighting)_ | ||
* [angular-highlight](https://github.com/pc035860/angular-highlightjs) | ||
* [jQuery](http://jquery.com/) _(required for Bootstrap-Markdown editor)_ | ||
## Demo | ||
### Live demo | ||
[Plunker demo](http://plnkr.co/AFxN7uiwkZlJ9OMZwXey) | ||
[Live Plunker demo](http://plnkr.co/AFxN7uiwkZlJ9OMZwXey) or take a look at the demo under the folder [example](https://github.com/ghiscoding/angular-markdown-editor/example). | ||
### Code example | ||
You can take a look at the demo under the folder [example](https://github.com/ghiscoding/angular-markdown-editor/example). | ||
## Preview | ||
Editor & Preview | ||
![Login Page](/images/scrshot_preview.png) |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
56486
59