1 changed files with 98 additions and 105 deletions
Split View
Diff Options
-
+98 -105ace/index.html
+ 98
- 105
ace/index.html
View File
| @@ -1,120 +1,113 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <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> | |||
| <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> | |||