172 lines
No EOL
5.3 KiB
HTML
172 lines
No EOL
5.3 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/Html.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../src/mode/HtmlHighlightRules.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../src/mode/Css.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../src/mode/CssHighlightRules.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>
|
|
<option value="html">HTML</option>
|
|
<option value="css">CSS</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>
|
|
</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(),
|
|
html: new ace.mode.Html(),
|
|
css: new ace.mode.Css(),
|
|
javascript: new ace.mode.JavaScript()
|
|
};
|
|
|
|
function getMode() {
|
|
return modes[modeEl.value];
|
|
}
|
|
|
|
var selectEl = document.getElementById("select_style");
|
|
selectEl.onchange = function() {
|
|
if (selectEl.checked) {
|
|
editor.setSelectionStyle("line");
|
|
} else {
|
|
editor.setSelectionStyle("text");
|
|
}
|
|
};
|
|
|
|
var selectEl = document.getElementById("highlight_active");
|
|
selectEl.onchange = function() {
|
|
editor.setHighlightActiveLine(!!selectEl.checked);
|
|
};
|
|
|
|
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.getSelection().selectAll();
|
|
|
|
var mode = "text";
|
|
if (/^.*\.js$/i.test(file.name)) {
|
|
mode = "javascript";
|
|
} else if (/^.*\.xml$/i.test(file.name)) {
|
|
mode = "xml";
|
|
} else if (/^.*\.html$/i.test(file.name)) {
|
|
mode = "html";
|
|
} else if (/^.*\.css$/i.test(file.name)) {
|
|
mode = "css";
|
|
}
|
|
|
|
editor.onTextInput(reader.result);
|
|
|
|
modeEl.value = mode;
|
|
editor.setMode(modes[mode]);
|
|
}
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
return ace.preventDefault(e);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |