ace/demo/editor.html
Fabian Jakobs 7529f90080 refactor selection support into a separate class
Merge branch 'master' into HEAD

Conflicts:
	src/Editor.js
	src/KeyBinding.js
	src/Selection.js
2010-04-15 15:37:08 +02:00

140 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">
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#container {
top: 30px;
right: 0px;
bottom: 0px;
left: 0px;
}
#controls {
width: 100%;
height: 30px;
border: 1px solid black;
margin: 0;
}
</style>
<link rel="stylesheet" href="../css/editor.css" type="text/css" charset="utf-8">
<script src="../src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/mode/Text.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/mode/JavaScript.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/mode/JavaScriptHighlightRules.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/mode/Xml.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/mode/XmlHighlightRules.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/MEventEmitter.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/Selection.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/TextDocument.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/Tokenizer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/BackgroundTokenizer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/CursorLayer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/GutterLayer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/TextLayer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/MarkerLayer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/TextInput.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/KeyBinding.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/Editor.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/VirtualRenderer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table id="controls">
<tr>
<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>
</select>
</td>
</tr>
</table>
<div id="container">
</div>
<script type="text/javascript" charset="utf-8">
var modeEl = document.getElementById("mode");
modeEl.onchange = function() {
editor.setMode(getMode());
};
var modes = {
text: new ace.mode.Text(),
xml: new ace.mode.Xml(),
javascript: new ace.mode.JavaScript()
};
function getMode() {
return modes[modeEl.value];
}
var container = document.getElementById("container");
var editor = new ace.Editor(
new ace.VirtualRenderer(container),
new ace.TextDocument("Juhu Kinners"),
getMode()
);
window.onresize = function() {
editor.resize();
};
ace.addListener(container, "dragover", function(e) {
return ace.preventDefault(e);
});
ace.addListener(container, "drop", function(e) {
try {
var file = e.dataTransfer.files[0];
} catch(e) {
return ace.stopEvent();
}
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function(e) {
editor.clearSelection();
editor.moveCursorTo(0, 0);
editor.selectFileEnd();
var mode = "text";
if (/^.*\.js$/i.test(file.name)) {
mode = "javascript";
} else if (/^.*\.xml$/i.test(file.name)) {
mode = "xml";
}
editor.onTextInput(reader.result);
modeEl.value = mode;
editor.setMode(modes[mode]);
}
reader.readAsText(file);
}
return ace.preventDefault(e);
});
</script>
</body>
</html>