Ace

Ace matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

Basic Editor with Javascript & HTML

/** * In fact, you're looking at ACE right now. Go ahead and play with it! * * We are currently showing off the JavaScript mode. ACE has support for 45 * language modes and 24 color themes! */ function add(x, y) { var resultString = "Hello, ACE! The result of your math is: "; var result = x + y; return resultString + result; } var addResult = add(3, 2); console.log(addResult);
<html> <head> <title>Demo</title> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul> <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul> </nav> </body> </html>

Auto Resize & Keyboard Shortcuts

Get all keyboard shortcut options from here

Auto Resize

<html> <head> <title>Demo</title> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul> <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul> </nav> </body> </html>

Keyboard Shortcuts

<html> <head> <title>Demo</title> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul> <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul> </nav> </body> </html>

CSS & SASS Editor

CSS Editor

body { overflow: hidden; } #editor { margin: 0; position: absolute; top: 0; bottom: 20px; left: 0; right: 0; } #statusBar { margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background-color: rgb(245, 245, 245); color: gray; } .ace_status-indicator { color: gray; position: absolute; right: 0; border-left: 1px solid; }

SASS

// sass ace mode; @import url(http://fonts.googleapis.com/css?family=Ace:700) html, body :background-color #ace text-align: center height: 100% .toggle $size: 14px :background url(http://subtlepatterns.com/patterns/dark_stripes.png) border-radius: 8px height: $size &:before $radius: $size * 0.845 $glow: $size * 0.125 box-shadow: 0 0 $glow $glow / 2 #fff border-radius: $radius &:active ~ .button box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4) ~ .tag font-size: 40px color: rgba(0,0,0,0.45) &:checked ~ .button box-shadow: 0 15px 25px -4px #ace ~ .tag font-size: 40px color: #c9c9c9

JSON & PHP Editor

JSON Editor

{"widget": { "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }}

PHP Code Editor

<?php $referenceTable = array(); $referenceTable['val1'] = array(1, 2); $referenceTable['val2'] = 3; $referenceTable['val3'] = array(4, 5); $testArray = array(); $testArray = array_merge($testArray, $referenceTable['val1']); var_dump($testArray); $testArray = array_merge($testArray, $referenceTable['val2']); var_dump($testArray); $testArray = array_merge($testArray, $referenceTable['val3']); var_dump($testArray); ?>