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

187 行
7.3KB

  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. background: #232B30;
  15. }
  16. .inner {
  17. margin-top: 28px;
  18. margin-left: 6px;
  19. margin-right: 6px;
  20. position: absolute;
  21. top: 0;
  22. bottom: 0;
  23. left: 0;
  24. right: 0;
  25. }
  26. .toolbar {
  27. height: 28px;
  28. background: #232B30; /* old browsers */
  29. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  30. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  31. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
  32. }
  33. .btn {
  34. height: 25px;
  35. outline: 0;
  36. padding: 3px 8px;
  37. color: #9fa8b0;
  38. font-weight: bold;
  39. text-shadow: 1px 1px #1f272b;
  40. border: 1px solid #1c252b;
  41. border-radius: 3px;
  42. -moz-border-radius: 3px;
  43. -webkit-border-radius: 3px;
  44. background: #232B30; /* old browsers */
  45. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  46. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  47. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
  48. box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
  49. -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
  50. -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
  51. }
  52. .btn_g {
  53. margin-right: 10px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="toolbar">
  59. <button id="btnLoad" onclick="load()" class="btn">⇑</button>
  60. <button id="btnSave" onClick="save()" class="btn btn_g">⇩</button>
  61. <button id="btnUndo" onClick="editor.undo()" class="btn">↶</button>
  62. <button id="btnRedo" onClick="editor.redo()" class="btn btn_g">↷</button>
  63. <button id="btnFs" onclick="toggleFullscreen()" class="btn">◻</button>
  64. </div>
  65. <div class="inner" id="editor"></div>
  66. <div class="inner" id="editor"></div>
  67. <script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  68. <script>
  69. var buildDom = ace.require("ace/lib/dom").buildDom;
  70. var editor = ace.edit("editor");
  71. editor.setOptions({
  72. mode: "ace/mode/text",
  73. theme: "ace/theme/ambiance",
  74. showPrintMargin: false,
  75. wrap: true,
  76. indentedSoftWrap: false,
  77. showFoldWidgets: false,
  78. showLineNumbers: true,
  79. showGutter: false,
  80. autoScrollEditorIntoView: true,
  81. fontSize: 14
  82. });
  83. function updateToolbar() {
  84. document.getElementById("btnUndo").disabled = !editor.session.getUndoManager().hasUndo();
  85. document.getElementById("btnRedo").disabled = !editor.session.getUndoManager().hasRedo();
  86. if (!window.fullscreen) {
  87. document.getElementById("btnFs").style.display = "compact";
  88. }
  89. }
  90. editor.on("input", updateToolbar);
  91. if (localStorage.getItem("acetest") !== null) {
  92. editor.setValue(localStorage.getItem("acetest"));
  93. editor.clearSelection();
  94. }
  95. editor.getSession().on('change', function () {
  96. localStorage.setItem("acetest", editor.getSession().getValue());
  97. });
  98. function save() {
  99. var file = prompt("Name the file:", "text.txt");
  100. download(file, editor.getSession().getValue());
  101. }
  102. editor.commands.addCommand({
  103. name: "save",
  104. exec: save,
  105. bindKey: {
  106. win: "ctrl-s",
  107. mac: "cmd-s"
  108. }
  109. });
  110. function toggleFullscreen() {
  111. if (!window.fullScreen) {
  112. var elem = document.documentElement;
  113. if (elem.requestFullscreen) {
  114. elem.requestFullscreen();
  115. } else if (elem.mozRequestFullScreen) { /* Firefox */
  116. elem.mozRequestFullScreen();
  117. } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
  118. elem.webkitRequestFullscreen();
  119. } else if (elem.msRequestFullscreen) { /* IE/Edge */
  120. elem.msRequestFullscreen();
  121. }
  122. document.getElementById("btnFs").style.display = "none";
  123. }
  124. else {
  125. if (document.exitFullscreen) {
  126. document.exitFullscreen();
  127. } else if (document.mozCancelFullScreen) {
  128. document.mozCancelFullScreen();
  129. } else if (document.webkitExitFullscreen) {
  130. document.webkitExitFullscreen();
  131. } else if (document.msExitFullscreen) {
  132. document.msExitFullscreen();
  133. }
  134. }
  135. }
  136. function download(filename, text) {
  137. var element = document.createElement('a');
  138. element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  139. element.setAttribute('download', filename);
  140. element.style.display = 'none';
  141. document.body.appendChild(element);
  142. element.click();
  143. document.body.removeChild(element);
  144. }
  145. function load() {
  146. var input = document.createElement('input');
  147. input.type = 'file';
  148. input.onchange = e => {
  149. // getting a hold of the file reference
  150. var file = e.target.files[0];
  151. // setting up the reader
  152. var reader = new FileReader();
  153. reader.readAsText(file,'UTF-8');
  154. // here we tell the reader what to do when it's done reading...
  155. reader.onload = readerEvent => {
  156. var content = readerEvent.target.result; // this is the content!
  157. editor.setValue(content);
  158. editor.clearSelection();
  159. }
  160. }
  161. input.click();
  162. }
  163. window.editor = editor;
  164. </script>
  165. </body>
  166. </html>