You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 3.6KB

5 years ago
5 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  6. <meta name="HandheldFriendly" content="True" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <title>Editor</title>
  9. <style type="text/css" media="screen">
  10. .ace_editor,
  11. .toolbar {
  12. border: 1px solid lightgray;
  13. margin: auto;
  14. width: 80%;
  15. }
  16. .ace_editor {
  17. height: 200px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <script src="require.js"></script>
  23. <script>
  24. // setup paths
  25. require.config({
  26. paths: {
  27. "ace": "src-min-noconflict"
  28. }
  29. });
  30. // load ace and extensions
  31. require(["ace/ace", "ace/ext/language_tools"], function(ace) {
  32. var buildDom = require("ace/lib/dom").buildDom;
  33. var editor = ace.edit();
  34. editor.setOptions({
  35. theme: "ace/theme/twilight",
  36. showPrintMargin: false,
  37. wrap: true,
  38. indentedSoftWrap: true,
  39. showFoldWidgets: false,
  40. showLineNumbers: true,
  41. showGutter: false,
  42. autoScrollEditorIntoView: true
  43. });
  44. var refs = {};
  45. function updateToolbar() {
  46. refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
  47. refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
  48. }
  49. editor.on("input", updateToolbar);
  50. if (localStorage.getItem("acetest") !== null) {
  51. editor.setValue(localStorage.getItem("acetest"));
  52. editor.clearSelection();
  53. }
  54. editor.getSession().on('change', function () {
  55. localStorage.setItem("acetest", editor.getSession().getValue());
  56. });
  57. function save() {
  58. alert("not yet implemented");
  59. }
  60. editor.commands.addCommand({
  61. name: "save",
  62. exec: save,
  63. bindKey: {
  64. win: "ctrl-s",
  65. mac: "cmd-s"
  66. }
  67. });
  68. buildDom(["div", {
  69. class: "toolbar"
  70. },
  71. ["button", {
  72. ref: "saveButton",
  73. onclick: save
  74. }, "save"],
  75. ["button", {
  76. ref: "undoButton",
  77. onclick: function() {
  78. editor.undo();
  79. }
  80. }, "undo"],
  81. ["button", {
  82. ref: "redoButton",
  83. onclick: function() {
  84. editor.redo();
  85. }
  86. }, "redo"],
  87. ["button", {
  88. style: "font-weight: bold",
  89. onclick: function() {
  90. editor.insertSnippet("**${1:$SELECTION}**");
  91. editor.renderer.scrollCursorIntoView()
  92. }
  93. }, "bold"],
  94. ["button", {
  95. style: "font-style: italic",
  96. onclick: function() {
  97. editor.insertSnippet("*${1:$SELECTION}*");
  98. editor.renderer.scrollCursorIntoView()
  99. }
  100. }, "Italic"],
  101. ], document.body, refs);
  102. document.body.appendChild(editor.container)
  103. window.editor = editor;
  104. });
  105. </script>
  106. </body>
  107. </html>