選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

80 行
2.7KB

  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. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  7. <meta name="HandheldFriendly" content="True" />
  8. <title>Editor</title>
  9. <style type="text/css" media="screen">
  10. body {
  11. overflow: hidden;
  12. background-color: #222;
  13. }
  14. .inner {
  15. margin-top: 32px;
  16. position: absolute;
  17. top: 0;
  18. bottom: 0;
  19. left: 0;
  20. right: 0;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="toolbar">
  26. <button id="btnSave" onClick="save()" class="btn btn-primary btn-xs">save</button>
  27. <button id="btnUndo" onClick="editor.undo()" class="btn btn-primary btn-xs">undo</button>
  28. <button id="btnRedo" onClick="editor.redo()" class="btn btn-primary btn-xs">redo</button>
  29. </div>
  30. <div class="inner" id="editor"></div>
  31. <script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  32. <script>
  33. var buildDom = ace.require("ace/lib/dom").buildDom;
  34. var editor = ace.edit("editor");
  35. editor.setOptions({
  36. mode: "ace/mode/text",
  37. theme: "ace/theme/ambiance",
  38. showPrintMargin: false,
  39. wrap: true,
  40. indentedSoftWrap: true,
  41. showFoldWidgets: false,
  42. showLineNumbers: true,
  43. showGutter: false,
  44. autoScrollEditorIntoView: true
  45. });
  46. function updateToolbar() {
  47. document.getElementById("btnUndo") = !editor.session.getUndoManager().hasUndo();
  48. document.getElementById("btnRedo") = !editor.session.getUndoManager().hasRedo();
  49. }
  50. editor.on("input", updateToolbar);
  51. if (localStorage.getItem("acetest") !== null) {
  52. editor.setValue(localStorage.getItem("acetest"));
  53. editor.clearSelection();
  54. }
  55. editor.getSession().on('change', function () {
  56. localStorage.setItem("acetest", editor.getSession().getValue());
  57. });
  58. function save() {
  59. alert("not yet implemented");
  60. }
  61. editor.commands.addCommand({
  62. name: "save",
  63. exec: save,
  64. bindKey: {
  65. win: "ctrl-s",
  66. mac: "cmd-s"
  67. }
  68. });
  69. window.editor = editor;
  70. </script>
  71. </body>
  72. </html>