A markdown editor and live preview directive for Angular JS
2 people use it
Author: 503716?v=2 codemwnci

Angular JS Markdown Editor / Preview

See github for several code examples, and usage details (or download and read the readme, or run the sample html file).

This directive is a Markdown editor and separate preview element. They can therefore be used independently.

This uses PageDown for the conversion and sanitisation of the Markdown to HTML (i.e. the Preview element).

This uses Bootstrap-Markdown ( for the editor. The preview button has been disabled, to allow live-preview.

Currently, the pagedown and bootstrap-markdown libraries are included, but will be replaced with Bower in a later version.

Usage is pretty trivial. It requires

  • Add the dependency to the ['codemwnci.markdown-edit-preview'] module
  • Angular JS (obviously)
  • JQuery (for the editor to work) note: this must be defined first in the script list for the buttons to display
  • Pagedown (the Markdown previewer used by StackExchange, and many other sites)
  • Bootstrap-Markdown
  • Bootstrap 3 css (for the markdown editor to work)
comments powered by Disqus
This page was last updated over 3 years ago.