title: Embed ACE Editor into tab
body: <p>I have to jsfiddles</p>
  
  <ol>
  <li><a href="http://jsfiddle.net/Q6xBV/2/" rel="nofollow">HTML with tabs</a></li>
  <li><a href="http://jsfiddle.net/7y5Zr/2/" rel="nofollow">Embedded ACE Editor</a></li>
  </ol>
  
  <p>Below are complete codes per warning</p>
  
  <h2>HTML with tabs</h2>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;html xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
      &lt;script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;ul class="tabs"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- tab "panes" --&gt;
      &lt;div class="panes"&gt;
        &lt;div id="pane1"&gt;Tab1 content&lt;/div&gt;
        &lt;div id="pane2"&gt;Tab2 content&lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
        $(function() {
          $("ul.tabs").tabs("div.panes &gt; div");
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.css</strong></p>
  
  <pre><code>body {
    margin: 0;
    padding:50px 80px;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica;
  }
  
  .panes div {
      display:none;
      padding:15px 10px;
      border-top :1px solid #999;
      height:500px;
      font-size:14px;
      background-color:#fff;
  }
  
   ul.tabs {
      list-style:none;
      margin:0 !important;
      padding:0;
      height:30px;
  }
  
  ul.tabs li {
      float:left;
      text-indent:0;
      padding:0;
      margin:0 !important;
  }
  
  ul.tabs a {
      font-size:11px;
      display:block;
      height: 30px;
      line-height:30px;
      width: 134px;
      text-align:center;
      text-decoration:none;
      color:#333;
      padding:0px;
      margin:0px;
      position:relative;
      top:1px;
  }
  
   ul.tabs a:active {
      outline:none;
  }
  
  ul.tabs a:hover {
      color:red;
  }
  
  ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
      font-size: 14px;
      cursor:default !important;
      color:#000 !important;
  }
  
  .panes .pane {
      display:none;
  }
  
  #pane2 { 
      position: absolute;
      top: 80px;
      bottom: 10px;
      left: 80px;
      right: 10px;
  }
  </code></pre>
  
  <p><hr/></p>
  
  <h2>HTML with ACE Editor embedded</h2>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;html xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
      &lt;script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="pane2"&gt;
      function foo(items){
        var x = "All this is syntax highlighted";
        return x;
      }
    &lt;/div&gt;
    &lt;script src="test.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.css</strong> - is the same</p>
  
  <p><strong>test.js</strong></p>
  
  <pre><code>var editor = ace.edit("pane2");
  editor.getSession().setUseWorker(false);
  editor.setTheme("ace/theme/textmate");
  editor.getSession().setMode("ace/mode/javascript");
  </code></pre>
  
  <p><hr/>
  So, my goal is combine those two pages into one, where in first tab there is some content, and in second one there should be editor itself. When I do it as following</p>
  
  <h2>HTML with tabs and ACE Editor in second tab</h2>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;html xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
      &lt;script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;ul class="tabs"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- tab "panes" --&gt;
      &lt;div class="panes"&gt;
        &lt;div id="pane1"&gt;Tab1 content&lt;/div&gt;
        &lt;div id="pane2"&gt;
            function foo(items){
              var x = "All this is syntax highlighted";
              return x;
            }
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
        $(function() {
          $("ul.tabs").tabs("div.panes &gt; div");
        });
      &lt;/script&gt;
      &lt;script src="test.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.css</strong> - is the same</p>
  
  <p><strong>test.js</strong> - is the same</p>
  
  <p>then Tab 1 shows content correctly <strong>but there's no editor in tab 2</strong>. <a href="http://jsfiddle.net/CzLnW/1/" rel="nofollow">This</a> is the jsfiddle of non-working code.</p>
  
  <p>Any hints, help, ready-to-go code that fix the problem are appreciated. Thanks in advance.</p>