|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <!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>
-
- <body>
-
- <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 = require("ace/lib/dom").buildDom;
- var editor = ace.edit();
- editor.setOptions({
- theme: "ace/theme/twilight",
- showPrintMargin: false,
- wrap: true,
- indentedSoftWrap: true,
- showFoldWidgets: false,
- showLineNumbers: true,
- showGutter: false,
- autoScrollEditorIntoView: true
- });
- var refs = {};
-
- function updateToolbar() {
- refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
- refs.redoButton.disabled = !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"
- }
- });
-
- 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>
|