Simple, yet extensible Markdown editor built with Codemirror.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist Ran build and deployed to gh-pages Apr 1, 2015
src Fixed issue where Fullscreen mode wouldn't allow you to scroll vertic… Apr 1, 2015
.gitignore
bower.json Moved files around, setup gulpfile.js for minify, packaging, and depl… Mar 13, 2015
gulpfile.js Modified the index.html demo to use CDNs and non-minified versions of… Mar 13, 2015
package.json Added missing 'gulp-rename' module and added another 'codemirror/mode… Mar 13, 2015
readme.md docs: set correct cordemirror link Apr 21, 2017

readme.md

Overview

MirrorMark is a simple, yet extensible Markdown editor created with Codemirror.

See Demo.

Install

bower install mirrormark

Dependencies

  • Codemirror
  • Lodash
  • Font Awesome (for toolbar icons)

CSS

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.css" rel="stylesheet" />
<link href="./css/mirrormark.min.css" rel="stylesheet" />
  • mirrormark.css contains the theme for the editor and toolbar. If you'd like to adjust the theme create your own {theme}.css file and namespace the selectors with your theme name.
  • You can load codemirror.css and mirrormark.css together by using css/mirrormark.package.css or just load them separately.

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/addon/edit/continuelist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="./js/mirrormark.min.js"></script>
  • You can load all of these together at once by using js/mirrormark.package.min.js or just load each piece separately depending on the situation.

Basic Usage

HTML

<textarea id="textarea1"></textarea>

Javascript

textarea1 = mirrorMark(document.getElementById("textarea1"), { showToolbar: true });
textarea1.render();

Custom Actions, Keymaps, and Toolbar.

MirrorMark allows you to add custom actions, keymaps, and toolbar options. Below is an example of how to add two actions at runtime and a tool icon with a dropdown to call these two actions.

HTML

<textarea id="textarea2"></textarea>

Javascript

var customActions = {
	// Inserts three images wrapped in a <div>
	"threeUp": function threeUp() {
		var html = [];
		html.push("<div class='threeUp'>");
		html.push("	<img src='' />");
		html.push("	<img src='' />");
		html.push("	<img src='' />");
		html.push("</div>");

		this.insert(html);
	},
	"fourUp": function fourUp() {
		var html = [];
		html.push("<div class='fourUp'>");
		html.push("	<img src='' />");
		html.push("	<img src='' />");
		html.push("	<img src='' />");
		html.push("	<img src='' />");
		html.push("</div>");

		this.insert(html);
	}
}

var customKeyMaps = { 
	"Shift-Cmd-Alt-3": "threeUp",
	"Shift-Cmd-Alt-4": "fourUp",
};

var customTools = [{ 
	name: "threeUp", 
	action: null, 
	className: "fa fa-fighter-jet", 
	nested: [
	    { 
    		name: "threeUp", 
    		action: "threeUp", 
    		showName: true
    	},
    	{
    		name: "fourUp", 
    		action: "fourUp", 
    		showName: true
    	}
	]
}];

textarea2 = mirrorMark(document.getElementById("textarea2"), { autofocus: true, showToolbar: true });
textarea2.registerActions(customActions);
textarea2.registerKeyMaps(customKeyMaps);
textarea2.registerTools(customTools);
textarea2.render();

Options

When instantiating the editor you can pass the various Codemirror options available. There is also an option to opt to show toolbar showToolbar: true (Default: false) and the option to change the theme theme: name.

Custom Methods

  • registerActions(actions) - Accepts an object with an Action name as the key and an anonymous function for the value.
  • registerKeymaps(keymaps) - Accepts an object with Keymap name as the key and an anonymous function for the value.
  • RegisterTools(tools, replace) - Accepts an array of custom tool objects with the option of replacing (default: false) the existing toolbar.

Insertion Methods

  • this.insert(string) - Inserts a string at the current cursor position
  • this.insertBefore(string, cursorOffset) - Inserts a string at the current cursor position and then moves the cursor to the cursorOffset (int).
  • this.insertAround(start, end) - Inserts a given string value at the start and end of a selection.

Things coming

  • Windows support for Keymaps
  • Fullscreen editing
  • Preview mode
  • Status bar