<!--
https://stackoverflow.com/questions/59004560/how-can-i-open-a-file-into-ace-text-editor
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="jquery-minimap.js"></script>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
}
#parent {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
.child {
position: absolute;
height: 200px;
width: 100px;
background-color: #AFBBC6;
cursor: move;
}
#minimap {
position: fixed;
width: 125px;
height: 125px;
top: 20px;
right: 20px;
background-color: #EEE;
border: 1px solid #AAA;
opacity: 0.9;
z-index: 1;
}
.minimap-node {
position: absolute;
background-color: rgb(96, 122, 134);
}
.minimap-viewport {
position: absolute;
box-sizing: border-box;
background-color: rgba(79, 111, 126, 0.4);
z-index: 0;
cursor: move;
}
</style>
<meta charset="UTF-8" />
</head>
<body>
<div id="editnav">
<input
type="button"
id="downloadbtn"
onclick="downloadHTML()"
value="Download"
/>
<input
type="file"
id="openbtn"
onchange="openCode(this.files)"
value="Open"
/>
<input
type="button"
id="homebtn2"
onclick="window.location.href = 'https://plnkr.co/plunk/ZEkhoGgs4ntDZzT0';"
value="Home Electric Storm"
/><div id="minimap"></div>
</div> <div id="editor" class="editor">
<div id="p[arent"></div></div>
<script
src="http://ajaxorg.github.io/ace-builds/src/ace.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js"
type="text/javascript"
charset="utf-8"
></script>
<script>
var editor = ace.edit('editor', {
theme: 'ace/theme/monokai',
mode: 'ace/mode/html',
placeholder: 'choose file to edit',
});
function openCode(files) {
var file = files[0];
if (!file) return;
var modelist = ace.require('ace/ext/modelist');
var modeName = modelist.getModeForPath(file.name).mode;
editor.session.setMode(modeName);
reader = new FileReader();
reader.onload = function () {
editor.session.setValue(reader.result);
};
reader.readAsText(file);
}
function downloadHTML() {
download('Ace_Edit.html', editor.session.getValue());
}
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute(
'href',
'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
editor.session.setValue('<!DOCTYPE html>\n<html>\n<head>\n<title>Hey Electra, Electric Storm </title>\n<style>\n\n</style>\n</head>\n<body>\n<br>\n<br>\n<center>\n<h1>\nHi, Hello<br>\n<a href=\"https://plnkr.co/plunk/ZEkhoGgs4ntDZzT0\">Electric Storm</a>\n</h1>\n<br>\n</h1>\n</body>\n</html>');
</script>
<script>
$(function () {
// First, lets build an interesting example of parent and child DOM elements...
// Add children to the parent.
var $parent = $( "#editor" );
// Now invoke the minimap method on the element you'd like to become the minimap,
// passing a reference to the element you'd like the map to be based on.
$( "#minimap" ).minimap( $parent );
});
</script>
</body>
</html>
<!--
This Editor Was Created By Michael Mccright.
If This Document Is Copied,
This Document Will Be Removed.
https://codepen.io/ldijkman/pen/xxWBzWp
-->
<!--Try Full Page View.-->
<!--
<html lang="en">
<head>
<title>Ace Editor Example</title>
<style>
#editor {
width: 600vh;
height: 50vh;
}
iframe {
width: 600vh;
height: 40vh;
border-style: 2px solid;
}
<style>
</head>
<body>
<button onclick='save()'>Save</button>
<div id="editor"></div>
<iframe id='preview'></iframe>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
editor.setValue('<!DOCTYPE html>\n<html>\n \n</html>');
editor.session.on('change', function(delta) {
var preview = document.getElementById('preview').contentWindow.document;
preview.open();
preview.writeln(editor.getValue());
preview.close();
});
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
editor.change();
function save() {
download('file.html', editor.getValue());
}
</script>
</body>
</html>
-->
/* Add your styles here */
// Add your code here