Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

142 linhas
5.6KB

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