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.

105 line
4.1KB

  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: #232B30; /* old browsers */
  13. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  14. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  15. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
  16. }
  17. .inner {
  18. margin-top: 36px;
  19. position: absolute;
  20. top: 0;
  21. bottom: 0;
  22. left: 0;
  23. right: 0;
  24. }
  25. .btn {
  26. outline: 0;
  27. padding: 3px 8px;
  28. color: #9fa8b0;
  29. font-weight: bold;
  30. text-shadow: 1px 1px #1f272b;
  31. border: 1px solid #1c252b;
  32. border-radius: 3px;
  33. -moz-border-radius: 3px;
  34. -webkit-border-radius: 3px;
  35. background: #232B30; /* old browsers */
  36. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  37. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  38. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
  39. box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
  40. -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
  41. -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
  42. }
  43. .btn_g {
  44. margin-right: 10px;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="toolbar">
  50. <!--<button id="btnSave" onClick="save()" class="btn btn_g">save</button>-->
  51. <button id="btnUndo" onClick="editor.undo()" class="btn">↶</button>
  52. <button id="btnRedo" onClick="editor.redo()" class="btn">↷</button>
  53. </div>
  54. <div class="inner" id="editor"></div>
  55. <script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  56. <script>
  57. var buildDom = ace.require("ace/lib/dom").buildDom;
  58. var editor = ace.edit("editor");
  59. editor.setOptions({
  60. mode: "ace/mode/text",
  61. theme: "ace/theme/ambiance",
  62. showPrintMargin: false,
  63. wrap: true,
  64. indentedSoftWrap: true,
  65. showFoldWidgets: false,
  66. showLineNumbers: true,
  67. showGutter: false,
  68. autoScrollEditorIntoView: true
  69. });
  70. function updateToolbar() {
  71. document.getElementById("btnUndo") = !editor.session.getUndoManager().hasUndo();
  72. document.getElementById("btnRedo") = !editor.session.getUndoManager().hasRedo();
  73. }
  74. editor.on("input", updateToolbar);
  75. if (localStorage.getItem("acetest") !== null) {
  76. editor.setValue(localStorage.getItem("acetest"));
  77. editor.clearSelection();
  78. }
  79. editor.getSession().on('change', function () {
  80. localStorage.setItem("acetest", editor.getSession().getValue());
  81. });
  82. function save() {
  83. alert("not yet implemented");
  84. }
  85. editor.commands.addCommand({
  86. name: "save",
  87. exec: save,
  88. bindKey: {
  89. win: "ctrl-s",
  90. mac: "cmd-s"
  91. }
  92. });
  93. window.editor = editor;
  94. </script>
  95. </body>
  96. </html>