angular-pagedown

A pagedown editor for AngularJS. View this Plunker for demo.

Instructions

1. bower install angular-pagedown --save
2. This will install also pagedown dependencies.
3. Import these files in your HTML
   1. pagedown/Markdown.Converter.js
   2. pagedown/Markdown.Sanitizer.js
   3. pagedown/Markdown.Extra.js
   4. pagedown/Markdown.Editor.js
   5. angular-pagedown/angular-pagedown.js
   6. angular-pagedown/angular-pagedown.css
4. If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually.
   1. But add this in your bower.json

      "overrides": {
      "pagedown": {
      "main": [
      "Markdown.Converter.js",
      "Markdown.Sanitizer.js",
      "Markdown.Extra.js",
      "Markdown.Editor.js",
      "wmd-buttons.png"
      ]
      }
      }

5. Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);

This package comes with 2 directives:

Editor

<pagedown-editor content="data.content"></pagedown-editor>

Options:

content

1. An expression.
2. Expression: Mandatory
3. Example: <pagedown-editor content="data.content"></pagedown-editor>
4. Example: <pagedown-editor content="'**some** _markdown_ text'"></pagedown-editor>

show-preview

1. Should a live preview be displayed.
2. Boolean: Default to true

help

1. An expression to invoke upon clicking the help (?) button.
2. Expression: Default to open http://daringfireball.net/projects/markdown/syntax in new window
3. Example: <pagedown-editor content="data.content" help="showSomeHelp()"></pagedown-editor>

insert-image

1. An expression to invoke upon clicking the "Insert Image" button.
2. Expression: Default to noop
3. Example: <pagedown-editor content="data.content" insert-image="promptImageUrl()"></pagedown-editor>
   1. The parent scope function promptImageUrl must return either:
      • A string of image URL.
      • A promise resolved with a string of image URL.

placeholder

1. An expression.
2. Expression: Default to empty string
3. Example: <pagedown-editor content="data.content" placeholder="{{data.placeholder}} or anything"></pagedown-editor>

editor-class

1. An expression to use as ngClass.
2. Expression: Default to wmd-input
3. Example: <pagedown-editor content="data.content" editorClass="{'a-class': true}"></pagedown-editor>
4. Example: <pagedown-editor content="data.content" editorClass="'a-class another-class'"></pagedown-editor>
5. Example: <pagedown-editor content="data.content" editorClass="aScopeVariable"></pagedown-editor>

editor-rows

1. Number of rows for the <textarea> element
2. Number: default to 10

preview-class

1. An expression to use as ngClass.
2. Expression: Default to wmd-panel wmd-preview
3. See editor-class

preview-content

1. An expression, will be updated with converted HTML when the editor content changes. Can be coupled with show-preview="false" and a custom previewer.
2. Optional

Viewer

<pagedown-viewer content="data.content"></pagedown-viewer>

TODO

1. Grunt setup to minify files.
2. Extend PageDown editor to allow override of hyper link insertion.