Встроить редактор ACE во вкладку

я должен jsfiddles

  1. HTML с вкладками
  2. Встроенный редактор ACE

Ниже приведены полные коды для каждого предупреждения.

HTML с вкладками

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 со встроенным редактором ACE

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 — то же самое

test.js

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

Итак, моя цель — объединить эти две страницы в одну, где на первой вкладке будет какой-то контент, а на второй должен быть сам редактор. Когда я делаю это следующим образом

HTML с вкладками и редактором ACE на второй вкладке

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 — то же самое

test.js — то же самое

то на вкладке 1 содержимое отображается правильно, но на вкладке 2 нет редактора. Это jsfiddle неработающего кода.

Приветствуются любые подсказки, помощь, готовый код, устраняющий проблему. Заранее спасибо.


javascript html css ace-editor jquery-tools
person Kaster    schedule 21.01.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы никогда не должны писать css как .panes div {display:none}; :) Ace в основном состоит из div, и это правило скрывает все внутри Ace. Вместо этого вы можете использовать .panes>.pane. рабочую демонстрацию см. на странице http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview.

Кстати, версия ace, которую вы использовали, очень старая, используйте более новую из jsdelivr или cdn.js или загрузите с github.

person a user    schedule 22.01.2014
comment
Чувак, это так здорово. Честно говоря, я просто скопировал этот css выше из примера вкладок jquery-tools. В любом случае это сработало идеально. Большое спасибо. - person Kaster; 22.01.2014

arrow_upward
1
arrow_downward

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

Возможно, это не лучшее решение, но оно все равно может пригодиться.

У меня были некоторые проблемы с тем, чтобы заставить его работать с вашей системой на основе вкладок, в итоге я схватил свой внешний жесткий диск и взял экспериментальный проект мобильного веб-браузера с вкладками.

Я попытался встроить редактор ace прямо в каждую вкладку, но это не сработало. Поэтому вы можете попробовать встроить его на веб-сайт и связать его через iframe. Это не лучшее решение, но лучшее, что я мог придумать на данный момент.

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" );
    }
});
person Michael Schwartz    schedule 22.01.2014
comment
Что ж, это тоже своего рода решение, хотя я не уверен, будут ли элементы DOM с iframe доступны из основного документа. Спасибо. Я буду следить за своим вопросом, если появятся какие-либо другие решения, прежде чем принять. - person Kaster; 22.01.2014