1 changed files with 98 additions and 105 deletions
Unified View
Diff Options
-
+98 -105ace/index.html
+ 98
- 105
ace/index.html
View File
| @@ -1,120 +1,113 @@ | |||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <meta charset="UTF-8"> | |||||
| <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> | |||||
| <meta name="HandheldFriendly" content="True" /> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |||||
| <title>Editor</title> | |||||
| <style type="text/css" media="screen"> | |||||
| .ace_editor, | |||||
| .toolbar { | |||||
| border: 1px solid lightgray; | |||||
| margin: auto; | |||||
| width: 80%; | |||||
| } | |||||
| .ace_editor { | |||||
| height: 200px; | |||||
| } | |||||
| </style> | |||||
| </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; | |||||
| } | |||||
| #editor { | |||||
| margin: 0; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| bottom: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| } | |||||
| </style> | |||||
| </head> | |||||
| <body> | <body> | ||||
| <script src="require.js"></script> | |||||
| <script> | |||||
| // setup paths | |||||
| require.config({ | |||||
| paths: { | |||||
| "ace": "src-min-noconflict" | |||||
| } | |||||
| }); | |||||
| // load ace and extensions | |||||
| require(["ace/ace", "ace/ext-language_tools"], function(ace) { | |||||
| var buildDom = ace.require("ace/lib/dom").buildDom; | |||||
| var editor = ace.edit(); | |||||
| editor.setOptions({ | |||||
| mode: "ace/mode/text", | |||||
| theme: "ace/theme/twilight", | |||||
| showPrintMargin: false, | |||||
| wrap: true, | |||||
| indentedSoftWrap: true, | |||||
| showFoldWidgets: false, | |||||
| showLineNumbers: true, | |||||
| showGutter: false, | |||||
| autoScrollEditorIntoView: true | |||||
| }); | |||||
| var refs = {}; | |||||
| <pre id="editor"></pre> | |||||
| function updateToolbar() { | |||||
| refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo(); | |||||
| refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo(); | |||||
| } | |||||
| editor.on("input", updateToolbar); | |||||
| <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.setOptions({ | |||||
| mode: "ace/mode/text", | |||||
| theme: "ace/theme/twilight", | |||||
| showPrintMargin: false, | |||||
| wrap: true, | |||||
| indentedSoftWrap: true, | |||||
| showFoldWidgets: false, | |||||
| showLineNumbers: true, | |||||
| showGutter: false, | |||||
| autoScrollEditorIntoView: true | |||||
| }); | |||||
| var refs = {}; | |||||
| if (localStorage.getItem("acetest") !== null) { | |||||
| editor.setValue(localStorage.getItem("acetest")); | |||||
| editor.clearSelection(); | |||||
| } | |||||
| function updateToolbar() { | |||||
| refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo(); | |||||
| refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo(); | |||||
| } | |||||
| editor.on("input", updateToolbar); | |||||
| editor.getSession().on('change', function () { | |||||
| localStorage.setItem("acetest", editor.getSession().getValue()); | |||||
| }); | |||||
| if (localStorage.getItem("acetest") !== null) { | |||||
| editor.setValue(localStorage.getItem("acetest")); | |||||
| editor.clearSelection(); | |||||
| } | |||||
| function save() { | |||||
| alert("not yet implemented"); | |||||
| } | |||||
| editor.commands.addCommand({ | |||||
| name: "save", | |||||
| exec: save, | |||||
| bindKey: { | |||||
| win: "ctrl-s", | |||||
| mac: "cmd-s" | |||||
| } | |||||
| }); | |||||
| editor.getSession().on('change', function () { | |||||
| localStorage.setItem("acetest", editor.getSession().getValue()); | |||||
| }); | |||||
| buildDom(["div", { | |||||
| class: "toolbar" | |||||
| }, | |||||
| ["button", { | |||||
| ref: "saveButton", | |||||
| onclick: save | |||||
| }, "save"], | |||||
| ["button", { | |||||
| ref: "undoButton", | |||||
| onclick: function() { | |||||
| editor.undo(); | |||||
| } | |||||
| }, "undo"], | |||||
| ["button", { | |||||
| ref: "redoButton", | |||||
| onclick: function() { | |||||
| editor.redo(); | |||||
| } | |||||
| }, "redo"], | |||||
| ["button", { | |||||
| style: "font-weight: bold", | |||||
| onclick: function() { | |||||
| editor.insertSnippet("**${1:$SELECTION}**"); | |||||
| editor.renderer.scrollCursorIntoView() | |||||
| } | |||||
| }, "bold"], | |||||
| ["button", { | |||||
| style: "font-style: italic", | |||||
| onclick: function() { | |||||
| editor.insertSnippet("*${1:$SELECTION}*"); | |||||
| editor.renderer.scrollCursorIntoView() | |||||
| } | |||||
| }, "Italic"], | |||||
| ], document.body, refs); | |||||
| document.body.appendChild(editor.container) | |||||
| function save() { | |||||
| alert("not yet implemented"); | |||||
| } | |||||
| window.editor = editor; | |||||
| }); | |||||
| </script> | |||||
| editor.commands.addCommand({ | |||||
| name: "save", | |||||
| exec: save, | |||||
| bindKey: { | |||||
| win: "ctrl-s", | |||||
| mac: "cmd-s" | |||||
| } | |||||
| }); | |||||
| </body> | |||||
| buildDom(["div", { | |||||
| class: "toolbar" | |||||
| }, | |||||
| ["button", { | |||||
| ref: "saveButton", | |||||
| onclick: save | |||||
| }, "save"], | |||||
| ["button", { | |||||
| ref: "undoButton", | |||||
| onclick: function() { | |||||
| editor.undo(); | |||||
| } | |||||
| }, "undo"], | |||||
| ["button", { | |||||
| ref: "redoButton", | |||||
| onclick: function() { | |||||
| editor.redo(); | |||||
| } | |||||
| }, "redo"], | |||||
| ["button", { | |||||
| style: "font-weight: bold", | |||||
| onclick: function() { | |||||
| editor.insertSnippet("**${1:$SELECTION}**"); | |||||
| editor.renderer.scrollCursorIntoView() | |||||
| } | |||||
| }, "bold"], | |||||
| ["button", { | |||||
| style: "font-style: italic", | |||||
| onclick: function() { | |||||
| editor.insertSnippet("*${1:$SELECTION}*"); | |||||
| editor.renderer.scrollCursorIntoView() | |||||
| } | |||||
| }, "Italic"], | |||||
| ], document.body, refs); | |||||
| document.body.appendChild(editor.container) | |||||
| window.editor = editor; | |||||
| </script> | |||||
| </body> | |||||
| </html> | </html> | ||||