How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
</script>
</body>
</html>