CODEWITHSUNDEEP
javascripthtmlcssjquery-toolsace-editor
Kaster
Kaster

Reputation: 427

Embed ACE Editor into tab

I have to jsfiddles

  1. HTML with tabs
  2. Embedded ACE Editor

Below are complete codes per warning

HTML with tabs

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
  </head>
  <body>
    <ul class="tabs">
      <li><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="panes">
      <div id="pane1">Tab1 content</div>
      <div id="pane2">Tab2 content</div>
    </div>
    <script>
      $(function() {
        $("ul.tabs").tabs("div.panes > div");
      });
    </script>
  </body>
</html>

test.css

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;
}

HTML with ACE Editor embedded

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
  </head>
  <body>
  <div id="pane2">
    function foo(items){
      var x = "All this is syntax highlighted";
      return x;
    }
  </div>
  <script src="test.js"></script>
  </body>
</html>

test.css - is the same

test.js

var editor = ace.edit("pane2");
editor.getSession().setUseWorker(false);
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/javascript");

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

HTML with tabs and ACE Editor in second tab

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
  </head>
  <body>
    <ul class="tabs">
      <li><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="panes">
      <div id="pane1">Tab1 content</div>
      <div id="pane2">
          function foo(items){
            var x = "All this is syntax highlighted";
            return x;
          }
      </div>
    </div>
    <script>
      $(function() {
        $("ul.tabs").tabs("div.panes > div");
      });
    </script>
    <script src="test.js"></script>
  </body>
</html>

test.css - is the same

test.js - is the same

then Tab 1 shows content correctly but there's no editor in tab 2. This is the jsfiddle of non-working code.

Any hints, help, ready-to-go code that fix the problem are appreciated. Thanks in advance.

Upvotes: 4

Views: 6516

Answers (2)

a user
a user

Reputation: 24094

You should never ever write css like .panes div {display:none};:) Ace mostly consists of divs, and this rule hides everything inside Ace. You can use .panes>.pane instead. for working demo see http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview

Btw version of ace you used is very old, use newer one from jsdelivr or cdn.js or download from github.

Upvotes: 3

Michael Schwartz
Michael Schwartz

Reputation: 8415

http://jsfiddle.net/CzLnW/3/

This is probably not the best solution but it may come in handy anyway.

I was having some trouble getting it to work with your tab based system, I ended up grabbing my external hard drive and grabbing a mobile tabbed web browser experiment project.

I tried embedding the ace editor directly into each tab, but that wasn't working. So you may want to try and embed it into a website and link it via iframe. It's not the best solution, but the best I could come up with at this time.

JQuery/JavaScript:

var websiteframe = '<iframe src="http://bing.com/" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
var tabs = $("#tabs").tabs();
var tabTitle = $('#tab_title');
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;

function addTab() {
    var label = tabTitle.val() || "" + tabCounter,
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        websiteframe = '<iframe src="http://duckduckgo.com/" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
    tabs.find(".ui-tabs-nav").append(li);
    tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
    tabs.tabs("refresh");
    tabCounter++;
}

$("#add_tab").click(function () {
    addTab();
});

// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    tabs.tabs( "refresh" );
});

tabs.bind( "keyup", function( event ) {
    if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
    }
});

Upvotes: 1

Related Questions