Load Content Into Ace Editor
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<div class="fileOpen btn btn-primary">
<span>Open</span>
<input type="file" id="file-input" class="open" />
<input type="file" class="open" />
</div>
<span><button class="btn btn-danger" id="btn-save">Save Text to File</button></span>
<div id="file-content" style="display: none;"></div>
<div id="aceEditor">
</div>
<!-- this works using xmp and NOT when using div's! -->
CSS
#aceEditor {
position: absolute;
top: 10%;
right: 0;
bottom: 30%;
left: 0;
}
#my_html_hidden {
display: none;
}
.fileOpen {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileOpen input.open {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
JavaScript
var editor;
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
displayContents(contents);
};
reader.readAsText(file);
}
function displayContents(contents) {
var element = document.getElementById('file-content');
element.innerText = contents;
initAceEditor()
}
document.getElementById('file-input')
.addEventListener('change', readSingleFile, false);
function initAceEditor() {
var editor = ace.edit("aceEditor");
editor.setTheme("ace/theme/solarized_light");
editor.getSession().setMode("ace/mode/html");
editor.setFontSize("15px") ;
editor.setPrintMarginColumn(false);
editor.setValue($("#file-content").text());
editor.setOptions({
maxLines: 20
});
/* Save to File */
$("#btn-save").click( function() {
var text = editor.getValue();
var orgFileName = (document.getElementById("file-input").files[0].name);
var filename = orgFileName;
var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename);
});
}