ace/editor.html
2010-11-24 15:56:31 +00:00

160 lines
No EOL
4 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Editor</title>
<meta name="author" content="Fabian Jakobs">
<style type="text/css" media="screen">
html {
height: 100%;
overflow: hidden;
}
body {
overflow: hidden;
margin: 0;
padding: 0;
font: sans-serif;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana;
font-size: 12px;
background: rgb(14, 98, 165);
color: white;
}
#editor {
top: 55px;
left: 0px;
background: white;
}
#controls {
width: 100%;
height: 55px;
}
#jump {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid red;
z-index: 10000;
display: none;
}
</style>
<script>
require = {
//urlArgs: "bust=" + (new Date()).getTime()
};
</script>
<script src="demo/require.js" type="text/javascript" charset="utf-8"></script>
<script src="demo/boot.js" type="text/javascript"></script>
<script>
setupPlugins({
pluginDirs: {
"../demo": {
singleFiles: ["demo_startup"]
}
}
}, function(plugin_manager, settings) {
var data = {
env: {
settings: settings
}
};
plugin_manager.catalog.startupPlugins(data, plugin_manager.REASONS.APP_STARTUP).then(function() {
var demo_startup = require("demo_startup");
demo_startup.launch(data.env);
});
});
</script>
</head>
<body>
<div id="jump"></div>
<table id="controls">
<tr>
<td>
<label for="doc">Document:</label>
<select id="doc" size="1">
<option value="js">JS Document</option>
<option value="html">HTML Document</option>
<option value="css">CSS Document</option>
</select>
</td>
<td>
<label for="mode">Mode:</label>
<select id="mode" size="1">
<option value="text">Plain Text</option>
<option value="javascript">JavaScript</option>
<option value="xml">XML</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
</td>
<td>
<label for="theme">Theme:</label>
<select id="theme" size="1">
<option value="ace/theme/textmate">TextMate</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/idle_fingers">idleFingers</option>
<option value="ace/theme/twilight">Twilight</option>
</select>
</td>
<td>
<label for="select_style">Full line selections</label>
<input type="checkbox" name="select_style" id="select_style" checked>
</td>
<td>
<label for="highlight_active">Highlight active line</label>
<input type="checkbox" name="highlight_active" id="highlight_active" checked>
</td>
<td align="right">
<img src="demo/logo.png">
</td>
</tr>
</table>
<div id="editor">
</div>
<script type="text/editor" id="jstext">function foo(items) {
for (var i=0; i<items.length; i++) {
alert(items[i] + "juhu");
}
}</script>
<script type="text/editor" id="csstext">.text-layer {
font-family: Monaco, "Courier New", monospace;
font-size: 12px;
cursor: text;
}
</script>
<script type="text/editor" id="htmltext"><html>
<head>
<style type="text/css">
.text-layer {
font-family: Monaco, "Courier New", monospace;
font-size: 12px;
cursor: text;
}
</style>
</head>
<body>
<h1 style="color:red">Juhu Kinners</h1>
</body>
</html>
</script>
</body>
</html>