A TinyMCE plugin that provides an HTML editor including all Emmet features
JavaScript CSS Scala
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.
css
js
.gitignore
.jshintrc
Gruntfile.js
LICENSE
README.md
editor.html
index.html
package.json
plugin.js
plugin.min.js

README.md

tinymce-emmet-plugin

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: http://github.e-sites.nl/tinymce-emmet-plugin/

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

/tinymce/plugins/emmet/css
/tinymce/plugins/emmet/js
/tinymce/plugins/emmet/editor.html
/tinymce/plugins/emmet/plugin.js
/tinymce/plugins/emmet/plugin.min.js

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

tinymce.init({
	selector: '#editor',
	plugins: 'emmet',
	width: 800,
	height: 400
});

Default Emmet keybindings

As stated on https://github.com/emmetio/codemirror:

  • 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

##Roadmap

  • 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.