<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="HandheldFriendly" content="True" /> <title>Editor</title> <style type="text/css" media="screen"> body { margin: 0; padding: 0; overflow: hidden; background: #232B30; } .inner { margin-top: 28px; margin-left: 6px; margin-right: 6px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .toolbar { height: 28px; background: #232B30; /* old browsers */ background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */ } .btn { height: 25px; outline: 0; padding: 3px 8px; color: #9fa8b0; font-weight: bold; text-shadow: 1px 1px #1f272b; border: 1px solid #1c252b; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #232B30; /* old browsers */ background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */ box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */ -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */ -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */ } .btn_g { margin-right: 10px; } </style> </head> <body> <div class="toolbar"> <button id="btnLoad" onclick="load()" class="btn">⇑</button> <button id="btnSave" onClick="save()" class="btn btn_g">⇩</button> <button id="btnUndo" onClick="editor.undo()" class="btn">↶</button> <button id="btnRedo" onClick="editor.redo()" class="btn btn_g">↷</button> <button id="btnFs" onclick="toggleFullscreen()" class="btn">◻</button> </div> <div class="inner" id="editor"></div> <script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var buildDom = ace.require("ace/lib/dom").buildDom; var editor = ace.edit("editor"); editor.setOptions({ mode: "ace/mode/text", theme: "ace/theme/ambiance", showPrintMargin: false, wrap: true, indentedSoftWrap: false, showFoldWidgets: false, showLineNumbers: true, showGutter: false, autoScrollEditorIntoView: true, fontSize: 14 }); function updateToolbar() { document.getElementById("btnUndo").disabled = !editor.session.getUndoManager().hasUndo(); document.getElementById("btnRedo").disabled = !editor.session.getUndoManager().hasRedo(); if (!window.fullscreen) { document.getElementById("btnFs").style.display = "compact"; } } editor.on("input", updateToolbar); if (localStorage.getItem("acetest") !== null) { editor.setValue(localStorage.getItem("acetest")); editor.clearSelection(); } editor.getSession().on('change', function () { localStorage.setItem("acetest", editor.getSession().getValue()); }); function save() { var file = prompt("Name the file:", "text.txt"); download(file, editor.getSession().getValue()); } editor.commands.addCommand({ name: "save", exec: save, bindKey: { win: "ctrl-s", mac: "cmd-s" } }); function toggleFullscreen() { if (!window.fullScreen) { var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } document.getElementById("btnFs").style.display = "none"; } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } 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); } function load() { var input = document.createElement('input'); input.type = 'file'; input.onchange = e => { var file = e.target.files[0]; var reader = new FileReader(); reader.readAsText(file,'UTF-8'); reader.onload = readerEvent => { editor.setValue(readerEvent.target.result); editor.clearSelection(); } } input.click(); } window.editor = editor; </script> </body> </html>