堆棧內存溢出
  簡體   English   中英

將ACE編輯器嵌入選項卡

[英]Embed ACE Editor into tab

 原文  2014-01-21 23:51:29  0   2    javascript/ html/ css/ jquery-tools/ ace-editor

問題描述

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

嵌入了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://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 Editor

的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。

任何提示，幫助，准備好修復問題的代碼都很受歡迎。 提前致謝。

2 個解決方案

解決方案1
 3 已采納  2014-01-22 12:53:16

你永遠不應該寫像.panes div {display:none}; :) Ace主要由div組成，這個規則隱藏了Ace中的所有內容。 您可以使用.panes>.pane 。 有關工作演示的信息，請參閱http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview

您使用的btw版本的ace很老，使用jsdelivr或cdn.js中較新的版本或從github下載。

解決方案2
 1  2014-01-22 01:10:48

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶標簽面板的ace編輯器 無法使用angular-ui-ace嵌入ACE編輯器“ ui-ace需要ace才能工作”錯誤 Ace編輯器將字段焦點改為tab鍵 Ace編輯器。 在自動完成中添加說明標簽 Ace編輯器（javascript）：觸發Ace編輯器事件處理程序的Tab按事件（不僅僅是插入&#39;/ t&#39;或空格） firebug的編輯器或firefox選項卡中的“如何嵌入自定義編輯器”？ Ace編輯器中的遞歸塊 在Ace編輯器中尋找更改 ACE Editor多行正則表達式 ace編輯器中的自動熱鍵
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM