|
2 | 2 | `1.1.0`
|
3 | 3 |
|
4 | 4 | ## What do we have?
|
5 |
| -In this package you 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 (doc, blog, etc...). Also planning on adding a 1-click button for simple Copy+Paste to email. |
| 5 | +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...). |
6 | 6 |
|
7 |
| -[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`) |
| 7 | +[Marked.js](https://github.com/chjj/marked) is awesome for markdown preview and [Highlight.js](https://highlightjs.org/) is a must have for easiser code viewing with colors highlighting. The [Bootstrap-Markdown](http://www.codingdrama.com/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`. |
8 | 8 |
|
9 | 9 | ## Demo
|
10 | 10 | [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/tree/master/example).
|
@@ -62,44 +62,44 @@ _NOTE: Unfortunately, the "highlight.js" npm module doesn't seem to have proper
|
62 | 62 | ```
|
63 | 63 |
|
64 | 64 | ### Inside the HTML
|
65 |
| -Simply create a `<textarea>` with an `ngModel` and a call to the Directive. |
| 65 | +Simply create a `<textarea>` with an `ngModel` and a `name` then a call to the Directive. |
66 | 66 | At the end, all you need is:
|
67 | 67 | ```html
|
68 | 68 | <!-- editor -->
|
69 |
| -<textarea ng-model="markdown" markdown-editor="" rows="10"></textarea> |
| 69 | +<textarea ng-model="editor1" name="editor1" markdown-editor="" rows="10"></textarea> |
70 | 70 |
|
71 | 71 | <-- preview... be sure to include the "angular-markdown-editor.css" style -->
|
72 | 72 | <!-- use "markdown" or "marked" on your <div> preview to show Tables correctly -->
|
73 |
| -<div marked="markdown" class="markdown" style="padding: 20px"></div> |
| 73 | +<div marked="editor1" class="markdown" style="padding: 20px"></div> |
74 | 74 | ```
|
75 | 75 |
|
76 |
| -### Editor extra options |
| 76 | +## Editor options |
77 | 77 | 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'}"...`
|
78 | 78 |
|
79 | 79 | or multiple options
|
80 | 80 | ```
|
81 | 81 | <textarea markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true}"...
|
82 | 82 | ```
|
83 | 83 |
|
84 |
| -### Editor extra buttons |
| 84 | +## Editor extra buttons |
85 | 85 | I really thought that some buttons were missing to go a great job (~~Strikethrough~~ & **Table**). 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 `addExtraButtons` to `true`.
|
86 | 86 | ```
|
87 | 87 | <textarea markdown-editor="{addExtraButtons: true, 'iconlibrary': 'fa'}"...
|
88 | 88 | ```
|
89 | 89 |
|
90 |
| -### Event Hooks |
| 90 | +## Event Hooks |
91 | 91 | ###### starting with Angular-Markdown-Editor version 1.1.0
|
92 | 92 | You have access to all the Bootstrap Markdown Editor available events/hooks directly in the directive
|
93 | 93 |
|
94 |
| -_NOTE: It seems that Bootstrap Markdown Editor haven't releease any versions in a while but a lot of commits are still happening. If you want all the Events/Hooks to work, you should manually download the [Bootstrap Markdown Editor.js](https://github.com/toopay/bootstrap-markdown/tree/master/js) file yourself._ |
| 94 | +_(*) 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 [Bootstrap Markdown Editor.js](https://github.com/toopay/bootstrap-markdown/tree/master/js) file yourself._ |
95 | 95 |
|
96 | 96 | - onPreview
|
97 |
| -- onPreviewEnd |
| 97 | +- onPreviewEnd (*) |
98 | 98 | - onSave
|
99 | 99 | - onBlur
|
100 | 100 | - onFocus
|
101 | 101 | - onFullscreen
|
102 |
| -- onFullscreenExit |
| 102 | +- onFullscreenExit (*) |
103 | 103 | - onChange
|
104 | 104 | - onSelect
|
105 | 105 | - onShow
|
@@ -127,10 +127,11 @@ $scope.onFullScreenCallback = function(e) {
|
127 | 127 | }
|
128 | 128 | ```
|
129 | 129 |
|
130 |
| -### External function calls through $rootScope.markdownEditorObjects |
| 130 | +## External function calls through $rootScope.markdownEditorObjects |
131 | 131 | ###### starting with Angular-Markdown-Editor version 1.1.0
|
132 |
| -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 define editor, we could call any of the [Bootstrap Markdown Editor - API functions](http://www.codingdrama.com/bootstrap-markdown/). |
133 |
| -This varies with previous subject of (Event Hooks), since using the `$rootScope.markdownEditorObjects` can be called at any and makes perfect for example on a function attached to a button (for example an external button for a Full Screen Preview as shown below). |
| 132 | +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](http://www.codingdrama.com/bootstrap-markdown/). |
| 133 | + |
| 134 | +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. |
134 | 135 |
|
135 | 136 | For example HTML
|
136 | 137 | ```html
|
|
0 commit comments