|
- <!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 {
- overflow: hidden;
- 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 */
- }
- .inner {
- margin-top: 36px;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
- .btn {
- 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="btnSave" onClick="save()" class="btn btn_g">save</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: true,
- showFoldWidgets: false,
- showLineNumbers: true,
- showGutter: false,
- autoScrollEditorIntoView: true
- });
-
- function updateToolbar() {
- document.getElementById("btnUndo") = !editor.session.getUndoManager().hasUndo();
- document.getElementById("btnRedo") = !editor.session.getUndoManager().hasRedo();
- }
- 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() {
- alert("not yet implemented");
- }
-
- 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();
- }
- }
- else {
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen();
- }
- }
- }
-
- window.editor = editor;
-
- </script>
-
- </body>
- </html>
|