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
});
As stated on https://github.com/emmetio/codemirror:
Cmd-E
orTab
: Expand abbreviationCmd-D
: Balance Tag (matches opening and closing tag pair)Shift-Cmd-D
: Balance Tag InwardShift-Cmd-A
: Wrap With AbbreviationCtrl-Alt-Right
: Next Edit PointCtrl-Alt-Left
: Previous Edit PointCmd-L
: Select lineCmd-Shift-M
: Merge LinesCmd-/
: Toggle CommentCmd-J
: Split/Join TagCmd-K
: Remove TagShift-Cmd-Y
: Evaluate Math ExpressionCtrl-Up
: Increment Number by 1Ctrl-Down
: Decrement Number by 1Alt-Up
: Increment Number by 0.1Alt-Down
: Decrement Number by 0.1Ctrl-Alt-Up
: Increment Number by 10Ctrl-Alt-Down
: Decrement Number by 10Cmd-.
: Select Next ItemCmd-,
: Select Previous ItemCmd-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.