/angular-pagedown

A pagedown editor (used in StackOverflow) for AngularJS

Primary LanguageCSSMIT LicenseMIT

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
  4. pagedown/Markdown.Converter.js
  5. pagedown/Markdown.Sanitizer.js
  6. pagedown/Markdown.Extra.js
  7. pagedown/Markdown.Editor.js
  8. angular-pagedown/angular-pagedown.js
  9. angular-pagedown/angular-pagedown.css
  10. If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually.
  11. 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"
    ]
  }
}
  1. Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);

This package comes with 2 directives:

Editor

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

Options:

ng-model

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

ng-change

  1. An expression.
  2. Expression: Optional
  3. Example: <pagedown-editor ng-change="log()"></pagedown-editor>

$dirty

  • <pagedown-editor ng-model="data.content" name="mdInput"></pagedown-editor>
  • <dd ng-bind="myForm.mdInput.$dirty"></dd>

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 ng-model="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 ng-model="data.content" insert-image="promptImageUrl()"></pagedown-editor>
  4. 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 ng-model="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 ng-model="data.content" editorClass="{'a-class': true}"></pagedown-editor>
  4. Example: <pagedown-editor ng-model="data.content" editorClass="'a-class another-class'"></pagedown-editor>
  5. Example: <pagedown-editor ng-model="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.