Instant Codemirror Markdown Editor

Simple Markdown Editor

Easily create markdown editor with separately designed helping syntax toolbar, auto generate table contents from heading, along with Angular directive with 2 ways data-binding model option!

Git Repository

tar.gz .zip

Features

Installation

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

<!-- Codemirror stuffs, and highlight -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.10.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.10.0/codemirror.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.10.0/addon/mode/overlay.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.10.0/mode/markdown/markdown.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.10.0/mode/gfm/gfm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>

<!-- ui-codemirror-markdown-editor -->
<link rel="stylesheet" href="css/ui-codemirror-markdown-editor.css" />
<script src="js/ui-codemirror-markdown-editor.js"></script>

Basic Use

Source

<div id="codemirror-markdown-editor"></div>

<script type="text/javascript">
$(document).ready(function(){
    var codemirrorOptions = {};
    new MyCodemirrorUI( $('#codemirror-markdown-editor'), codemirrorOptions )
})
</script>

Use with self-designed toolbar

In this example, i created a toolbar buttons using bootstrap and font-awesome, pass its selector string in as a config option {toolbarContainer: '.btn-toolbar'}. Inside the toolbar, only buttons that has attribute data-editorbtn make sense to our editor, and its value specify its corresponding function. Ex: <a data-editorbtn="h1"><h1>Heading 1</h1></a>. Visually, you can design the toolbar for yourself, and put it any where you want.

Source

codemirrorOptions = {
  toolbarContainer: '.btn-toolbar'
};
new MyCodemirrorUI( $('#codemirror-markdown-editor-2'), codemirrorOptions );

Here is the list of functions provided:

Item Value
h[1-6] Heading element with the level from 1 to 6
bold make selected text bold
italic make selected text italic
strikethrough make selected text strikethrough
undo step back one step
redo step forward one step
list create list
table create table
eye change view between markdown, preview or both
fullscreen make fullscreen view editor
script create script ( javascript, html, C, java, python,....)

Generate Table Contents

Like toolbar, we create a dom element to hold table content <div id="toc"></div>, and pass its selector string as a config option {tocContainer: "#toc"}. Table Content HTML which will be rendered inside the container should look like: 

<ul>
  <li><a href="#header-1">Header 1</a>
    <ul>
      <li><a href="#sub1">Sub1</a></li>
      <li><a href="#sub2">Sub2</a></li>
    </ul>
  </li>
  <li><a href="#header-2">Header 2</a>
    <ul>
      <li><a href="#sub1">Sub1</a></li>
      <li><a href="#sub-head-2">Sub head 2</a>
        <ul>
          <li><a href="#subsub1">Subsub1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

And you are free to style it yourself!

Source

<div id="editor-3"></div>
<div id="toc"></div>
<script type="text/javascript">
    codemirrorOptions = {
        tocContainer: "#toc"
    };
    new MyCodemirrorUI( $('#editor-3'), codemirrorOptions );
</script>

Use as Angular directive

Source

We have to create a javascript file for definition of Angular module and controller, remember to include ui-codemirror-markdown module.

controller.js
angular.module('MyModule', ['ui-codemirror-markdown'])
    .controller('MyController', ['$scope', controller]);

function controller($scope){
    $scope.content = "#This is Codemirror Markdown Angular directive";
    $scope.editorOptions = {
        lineNumbers: false
    };
}

Then include javascript file and setup html element

html
<script src="js/controller.js"></script>
<body data-ng-app="MyModule">
    ...
    <section data-ng-controller="MyController">
      <div ng-model="content" ui-codemirror-markdown="editorOptions"></div>
    </section>
    ...      
</body>