将ACE编辑器嵌入选项卡

Kaster 发表于 Dev

投掷

我必须去jsfiddles

以下是每个警告的完整代码

带标签的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;
}

嵌入ACE Editor的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://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。

可以解决该问题的任何提示，帮助和随时可用的代码。提前致谢。

一个用户

您永远不要像这样写css .panes div {display:none};：:) Ace主要由div组成，并且此规则将Ace中的所有内容隐藏起来。您可以.panes>.pane改用。有关工作演示，请参见http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview

您使用的ace的Btw版本非常旧，可以从jsdelivr或cdn.js使用较新的版本，也可以从github下载。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。