Creating A JSFiddle-Like Code Editor with jQuery and ACE Editor - Cloud Edit

A JSFiddle-Like live code editor/playground/test tool built on top of jQuery, CSS3, Html5 and ACE editor. The plugin provides multiple toggleable panels that allows you to edit, preview or test you Html, CSS or Javascript codes online. With the help of HTML5 sessionStorage and localStorage, the editor has the ability to save the current sessions and data into your client side for preventing data loss.

How to use it:

1. Include the required CSS files in the head section of the page.

<link href="css/cloudEdit.css" rel="stylesheet">
<link href="css/contextMenu.css" rel="stylesheet">

2. Include the necessary javascript files at the bottom of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/autoprefixer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ui.position.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/contextMenu.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cloudEdit.min.js" type="text/javascript" charset="utf-8"></script>

3. Create buttons to toggle editor panels.

<a class="btn" id="previewToggle" href="#!" title="Enlarge Preview">Preview</a>
<a class="btn" id="clear" href="#!" title="Click to clear all">Clear</a>
<a class="btn" id="download" href="#!" title="Download">Download</a>
<a class="btn" id="htmlToggle" href="#!" title="Toggle HTML">Toggle HTML</a>
<a class="btn" id="cssToggle" href="#!" title="Toggle CSS">Toggle CSS</a>
<a class="btn" id="jsToggle" href="#!" title="Toggle JS">Toggle JS</a>
<a class="btn btn-hidden" id="consoleToggle" href="#!" title="Toggle Console">Toggle Console</a>

4. Create the Html for the editor, preview and console panels.

<div class="windowGroup">
<div class="window html">
<pre id="html"></pre>
<span class="windowLabel" id="htmlLabel">HTML</span>
</div>
<div class="window css">
<pre id="css"></pre>
<span class="windowLabel" id="cssLabel">CSS</span>
</div>
<div class="window js">
<pre id="js"></pre>
<span class="windowLabel" id="jsLabel">JavaScript/jQuery 1.x</span>
</div>
</div>

<div class="console">
<pre id="console"></pre>
<span class="windowLabel" id="consoleLabel">Console [right-click to clear]</span>
</div>

<div class="preview">
<iframe id="iframe"></iframe>
<span class="windowLabel" id="iframeLabel">Preview</span>
<span class="windowLabel" id="iframeClose">X</span>
</div>

Change log:

2014-05-06

• added complete javascript console

2014-04-13

• Improved HTML/CSS for more "responsive" layout
• Fixed: Buttons weren't using Clear Sans font

---

This awesome jQuery plugin is developed by TheInsomniac. For more Advanced Usages, please check the demo page or visit the official website.