gpt4 book ai didi

javascript - 将 ACE 编辑器嵌入选项卡

转载 作者:搜寻专家 更新时间:2023-10-31 08:18:53 25 4
gpt4 key购买 nike

我必须 jsfiddles

  1. HTML with tabs
  2. Embedded 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://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 编辑器

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 中没有编辑器This是非工作代码的 jsfiddle。

感谢任何提示、帮助和解决问题的现成代码。提前致谢。

最佳答案

你永远不应该像 .panes div {display:none}; 这样写 css:)Ace 主要由 div 组成,这条规则隐藏了 Ace 中的所有内容。您可以改用 .panes>.pane。有关工作演示,请参阅 http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview

顺便说一下,您使用的 ace 版本很旧,请使用来自 jsdelivr 或 cdn.js 的较新版本或从 github 下载。

关于javascript - 将 ACE 编辑器嵌入选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21271487/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com