Skip to content


Repository files navigation


A TinyMCE plugin that provides an HTML editor including all Emmet features (formerly Zen Coding).

First and foremost, I really must give credit to Sergey Chikuyonok (of Emmet fame) and the good folk of CodeMirror. All I did was wrap both libraries up in a TinyMCE plugin ;-)

A demo is located at:

##Getting started Create an 'emmet' directory in the plugin file structure and copy/paste at least the following directories and files:


Pass along the name of the plugin to the plugins property of the init method and you're good to go.

	selector: '#editor',
	plugins: 'emmet',
	width: 800,
	height: 400

Default Emmet keybindings

As stated on

  • Cmd-E or Tab: Expand abbreviation
  • Cmd-D: Balance Tag (matches opening and closing tag pair)
  • Shift-Cmd-D: Balance Tag Inward
  • Shift-Cmd-A: Wrap With Abbreviation
  • Ctrl-Alt-Right: Next Edit Point
  • Ctrl-Alt-Left: Previous Edit Point
  • Cmd-L: Select line
  • Cmd-Shift-M: Merge Lines
  • Cmd-/: Toggle Comment
  • Cmd-J: Split/Join Tag
  • Cmd-K: Remove Tag
  • Shift-Cmd-Y: Evaluate Math Expression
  • Ctrl-Up: Increment Number by 1
  • Ctrl-Down: Decrement Number by 1
  • Alt-Up: Increment Number by 0.1
  • Alt-Down: Decrement Number by 0.1
  • Ctrl-Alt-Up: Increment Number by 10
  • Ctrl-Alt-Down: Decrement Number by 10
  • Cmd-.: Select Next Item
  • Cmd-,: Select Previous Item
  • Cmd-B: Reflect CSS Value


  • Support for TinyMCE 3.5.8
  • Make it more customizable
  • Implement Git Flow branch model
  • More documentation
  • More testing
  • Any other suggestions are welcome!

##Support Written for TinyMCE 4.x. Please note: I have written this plugin in a couple hours, so please report issues if you find any. Make sure to check out the browser support of CodeMirror as well if you run into any problems.

##License Copyright (c) 2013 e-sites Licensed under the MIT license.


A TinyMCE plugin that provides an HTML editor including all Emmet features







No releases published