I have always been fascinated by stackoverflow’s markdown/pagedown editor, So when I needed an text editor for a project(question & answer site) I have been working on lately in my spare time – QASK, I decided to go with a similar editor built for Angular JS.

Though there were many directives available for this, none of them were as complete and easy to use as angular-pagedown

Demo : http://plnkr.co/edit/9PHabp?p=preview

    <script data-require="angular.js@1.2.22" src="angular.js"></script>

    <script src="Markdown.Converter.js"></script>
    <script src="Markdown.Sanitizer.js"></script>
    <script src="Markdown.Editor.js"></script>

    <!-- The directive -->
    <script src="angular-pagedown.js"></script>

    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="myController">
      <pagedown-editor content="data.content" 
                       help="showSomeHelp()" 
                       show-preview="false" 
                       insert-image="insertImage()">
      </pagedown-editor>
      <hr />
      <pagedown-viewer content="data.content"></pagedown-viewer>
    </div>
  </body>

</html>

A little change in css and here’s how my final page looks like :)

enter image description here