toolbar.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Editor</title>
  7. <style type="text/css" media="screen">
  8. .ace_editor, .toolbar {
  9. border: 1px solid lightgray;
  10. margin: auto;
  11. width: 80%;
  12. }
  13. .ace_editor {
  14. height: 200px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <!-- load ace -->
  20. <script src="../src/ace.js"></script>
  21. <!-- load ace language_tools extension -->
  22. <script src="../src/ext-language_tools.js"></script>
  23. <script>
  24. var buildDom = require("ace/lib/dom").buildDom;
  25. var editor = ace.edit();
  26. editor.setOptions({
  27. theme: "ace/theme/tomorrow_night_eighties",
  28. mode: "ace/mode/markdown",
  29. maxLines: 30,
  30. minLines: 30,
  31. autoScrollEditorIntoView: true,
  32. });
  33. var refs = {};
  34. function updateToolbar() {
  35. refs.saveButton.disabled = editor.session.getUndoManager().isClean();
  36. refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
  37. refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
  38. }
  39. editor.on("input", updateToolbar);
  40. editor.session.setValue(localStorage.savedValue || "Welcome to ace Toolbar demo!")
  41. function save() {
  42. localStorage.savedValue = editor.getValue();
  43. editor.session.getUndoManager().markClean();
  44. updateToolbar();
  45. }
  46. editor.commands.addCommand({
  47. name: "save",
  48. exec: save,
  49. bindKey: { win: "ctrl-s", mac: "cmd-s" }
  50. });
  51. buildDom(["div", { class: "toolbar" },
  52. ["button", {
  53. ref: "saveButton",
  54. onclick: save
  55. }, "save"],
  56. ["button", {
  57. ref: "undoButton",
  58. onclick: function() {
  59. editor.undo();
  60. }
  61. }, "undo"],
  62. ["button", {
  63. ref: "redoButton",
  64. onclick: function() {
  65. editor.redo();
  66. }
  67. }, "redo"],
  68. ["button", {
  69. style: "font-weight: bold",
  70. onclick: function() {
  71. editor.insertSnippet("**${1:$SELECTION}**");
  72. editor.renderer.scrollCursorIntoView()
  73. }
  74. }, "bold"],
  75. ["button", {
  76. style: "font-style: italic",
  77. onclick: function() {
  78. editor.insertSnippet("*${1:$SELECTION}*");
  79. editor.renderer.scrollCursorIntoView()
  80. }
  81. }, "Italic"],
  82. ], document.body, refs);
  83. document.body.appendChild(editor.container)
  84. window.editor = editor;
  85. </script>
  86. </body>
  87. </html>