Skip to content

Commit

Permalink
Reorganized directories and cleaned up most of the code
Browse files Browse the repository at this point in the history
  • Loading branch information
Boye committed Aug 16, 2013
1 parent a22f581 commit 7892a88
Show file tree
Hide file tree
Showing 21 changed files with 20,351 additions and 79 deletions.
20 changes: 16 additions & 4 deletions Gruntfile.js
View file
Expand Up @@ -31,13 +31,25 @@ module.exports = function (grunt) {
},

uglify: {
options: {
banner: '<%= meta.banner %>\n'
},
build: {
plugin: {
options: {
banner: '<%= meta.banner %>\n'
},
files: {
'plugin.min.js': ['plugin.js']
}
},
resources: {
files: {
'js/codemirror/codemirror.min.js': [
'js/codemirror/src/codemirror.js',
'js/codemirror/src/css.js',
'js/codemirror/src/htmlmixed.js',
'js/codemirror/src/javascript.js',
'js/codemirror/src/xml.js'
],
'js/emmet/emmet-extras.min.js': ['js/emmet/src/editor.js', 'js/emmet/src/formatting.js', 'js/emmet/src/init.js']
}
}
}

Expand Down
30 changes: 28 additions & 2 deletions README.md
View file
Expand Up @@ -29,10 +29,36 @@ tinymce.init({
});
```

### Default Emmet keybindings
As stated on <a href="https://github.com/emmetio/codemirror">https://github.com/emmetio/codemirror</a>:

* `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
* Refactoring of editor.html
* Support for TinyMCE 3.5.8
* Make it more customizable
* Better documentation
* Implement Git Flow branch model
* More documentation
* More testing
* Any other suggestions are welcome!

Expand Down
Empty file added dest
View file
Empty file.
73 changes: 12 additions & 61 deletions editor.html
View file
@@ -1,64 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Emmet for TinyMCE</title>
<link rel="stylesheet" href="css/codemirror.min.css">
</head>
<body>
<form>
<textarea id="code" name="code" autofocus></textarea>
</form>
<script src="js/cm3/codemirror.js"></script>
<script src="js/cm3/xml.js"></script>
<script src="js/emmet/emmet-full.min.js"></script>
<script src="js/emmet/editor.js"></script>
<script src="js/formatting.js"></script>
<script>
var target = document.getElementById('code'),
editor = window.parent.tinymce.activeEditor,
cm;

target.value = editor.getContent({format : 'raw'});

cm = CodeMirror.fromTextArea(target, {
mode : 'text/html',
lineNumbers : true,
indentWithTabs: true,
autofocus: true
});

CodeMirror.commands['selectAll'](cm);

function getSelectedRange() {
return { from: cm.getCursor(true), to: cm.getCursor(false) };
}

function autoFormatSelection() {
var range = getSelectedRange();
cm.autoFormatRange(range.from, range.to);
}

function commentSelection(isComment) {
var range = getSelectedRange();
cm.commentRange(isComment, range.from, range.to);
}

autoFormatSelection();

// Save content
cm.on('change', function (cm) {
editor.setContent( cm.getTextArea().value );
editor.nodeChanged();
cm.save();
});

// For some reason calling setContent onchange is not enough
// with this listener we make sure that every rule of code will be send back to tinycme
cm.on('blur', function (cm) {
editor.setContent( cm.getTextArea().value );
editor.nodeChanged();
cm.save();
});
</script>
</body>
<head>
<title>TinyMCE Emmet Plugin</title>
<link rel="stylesheet" href="css/codemirror.min.css">
</head>
<body>
<form>
<textarea id="code" name="code" autofocus></textarea>
</form>
<script src="js/codemirror/codemirror.min.js"></script>
<script src="js/emmet/emmet-full.min.js"></script>
<script src="js/emmet/emmet-extras.min.js"></script>
</body>
</html>
56 changes: 49 additions & 7 deletions index.html
View file
Expand Up @@ -3,16 +3,58 @@
<head>
<meta charset="utf-8">
<title>TinyMCE: Emmet Plugin</title>
<link rel="dns-prefetch" href="//frontend.e-sites.nl">
<link rel="prerender" href="http://frontend.e-sites.nl/img/esites.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
<link rel="stylesheet" href="http://frontend.e-sites.nl/library/min/?g=css&1357562300">
<style>
#forkongithub a{background:#FF2045;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s; z-index:1031;}#forkongithub a:hover{background:#060;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}
</style>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-18924418-1'],['_setDomainName', '.e-sites.nl'],['_trackPageview'],['_trackPageLoadTime']);(function(b,c){var a=b.createElement(c),d=b.getElementsByTagName(c)[0];a.async=a.src='//www.google-analytics.com/ga.js';d.parentNode.insertBefore(a,d)})(document,'script');</script>
</head>
<body style="padding:1em;">
<h1>TinyMCE: Emmet Plugin</h1>
<form method="post">
<textarea id="editor"></textarea>
</form>
<script src="http://github.e-sites.nl/tinymce/tinymce.min.js"></script>
<script src="plugin.min.js"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><img src="http://frontend.e-sites.nl/img/esites.png" alt="e-sites"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="http://www.e-sites.nl/bureau.html" hreflang="nl">About</a></li>
</ul>
</div>
<a class="hiring animated" href="http://www.werkenbijesites.nl/" target="_blank">We're hiring!</a>
</div>
</div>
</div>
<div class="container" style="padding-top:20px;">
<h1>TinyMCE: Emmet Plugin</h1>
<blockquote><p>A TinyMCE plugin that provides an HTML editor including all <a href="https://github.com/emmetio/emmet" target="_blank">Emmet</a> features (formerly Zen Coding).</p></blockquote>
<span id="forkongithub"><a href="https://github.com/e-sites/tinymce-emmet-plugin">Fork me on GitHub</a></span>
<form method="post">
<textarea id="editor"></textarea>
</form>
</div>
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--<![endif]-->

<!-- bootstrap js -->
<script src="http://frontend.e-sites.nl/library/min/?g=bootstrap&1355489554"></script>

<!-- tinymce and emmet plugin -->
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="plugin.js"></script>
<script>
tinymce.init({
selector: '#editor',
Expand Down
10 changes: 10 additions & 0 deletions js/cm3/codemirror.min.js
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions js/codemirror/codemirror.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 7892a88

Please sign in to comment.