差分

このページの2つのバージョン間の差分を表示します。

--- javascript:ace [2019/08/20 14:32] – ともやん
+++ javascript:ace [2020/06/15 19:46] (現在) – ↷ 移動操作に合わせてリンクを書き換えました。非ログインユーザー
@@ 行 15: / 行 15: @@
   <script>
     jQuery(function($) {
-      var editor = ace.edit("ace_editor");
+      const editor = ace.edit("ace_editor");
       editor.setTheme("ace/theme/chrome");
       editor.session.setMode("ace/mode/javascript");
+      editor.setValue(editor.getValue().trim(), -1);
+      const lines = editor.getSession().getDocument().getLength();
+      editor.setOptions({maxLines: lines});
     });
   </script>
   <style>
     #ace_editor {
-      height: 300px;
+      margin-bottom: 20px;
     }
   </style>
@@ 行 33: / 行 36: @@
 ===== エディタデモ =====
-<WRAP prewrap 100%>
+<WRAP prewrap 100% #ace_editor>
-<html>
+%%/**
-<pre id='ace_editor'>
-/**
  * In fact, you're looking at ACE right now. Go ahead and play with it!
  *
@@ 行 50: / 行 51: @@
 var addResult = add(3, 2);
-console.log(addResult);
+console.log(addResult);%%
-</pre>
-</html>
 </WRAP>
+<code html>
+  <script src='/_media/javascript/ace/src-noconflict/ace.js'></script>
+  <script src="/_media/javascript/ace/src-noconflict/ext-static_highlight.js"></script>
+  <!--[if lt IE 9]>
+    <script src="/_media/javascript/ace/src-noconflict/ext-old_ie.js"></script>
+  <![endif]-->
+  <script src="/_media/javascript/ace/src-noconflict/mode-json.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/mode-html.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/mode-javascript.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/ext-emmet.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/ext-language_tools.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/snippets/text.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/snippets/javascript.js"></script>
+  <script src="/_media/javascript/ace/src-noconflict/snippets/html.js"></script>
+  <script>
+    jQuery(function($) {
+      const editor = ace.edit("ace_editor");
+      editor.setTheme("ace/theme/chrome");
+      editor.session.setMode("ace/mode/javascript");
+      const lines = editors[i].getSession().getDocument().getLength();
+      editor.setOptions({maxLines: lines});
+    });
+  </script>
+</code>
 ===== インストール =====
@@ 行 64: / 行 87: @@
 ==== ソースコードからのインストール ====
-Ace をソースからビルドするには [[javascript:node_js|node.js]] が必要です。\\
+Ace をソースからビルドするには [[javascript:nodejs|node.js]] が必要です。\\
 \\
 ソースを取得する。
@@ 行 91: / 行 114: @@
 $ make build
 </code>
+===== //#region [リージョンの説明] 〜 //#endregion までをデフォルトで折り畳む方法 =====
+実際のデモは以下にある。\\
+[[javascript:ide|IDE Labo - 総合開発環境の実験的実装]]\\
+<code javascript>
+  //#region [Ace Editor fold all region]
+  isCommentFold = (line) => {
+    var isAFold = false;
+    if (/^\s*(\/\*|\/\/)#?region\b/.test(line)) { isAFold = true; }
+    if (/\/\/(.*)\{/.test(line)) { isAFold = true; }
+    return isAFold;
+  }
+  ace.EditSession.prototype.foldAllRegion = function(startRow, endRow, depth) {
+    if (depth == undefined)
+      depth = 100000; // JSON.stringify doesn't hanle Infinity
+    var foldWidgets = this.foldWidgets;
+    if (!foldWidgets)
+      return; // mode doesn't support folding
+    endRow = endRow || this.getLength();
+    startRow = startRow || 0;
+    for (var row = startRow; row < endRow; row++) {
+      if (foldWidgets[row] == null)
+        foldWidgets[row] = this.getFoldWidget(row);
+      if (foldWidgets[row] != "start")
+        continue;
+      if (!isCommentFold(this.getLine(row))) continue
+      var range = this.getFoldWidgetRange(row);
+      // sometimes range can be incompatible with existing fold
+      // TODO change addFold to return null istead of throwing
+      if (range && range.isMultiLine()
+          && range.end.row <= endRow
+          && range.start.row >= startRow) {
+        row = range.end.row;
+        try {
+          // addFold can change the range
+          var fold = this.addFold("...", range);
+          if (fold)
+            fold.collapseChildren = depth;
+        } catch(ex) {}
+      }
+    }
+  };
+  //#endregion
+  jQuery(function($) {
+    const editor = ace.edit("ace_editor");
+    editor.setTheme("ace/theme/chrome");
+    editor.session.setMode("ace/mode/javascript");
+    const lines = editors[i].getSession().getDocument().getLength();
+    editor.setOptions({maxLines: lines});
+    // #region をデフォルトで折り畳む
+    editor.session.foldAllRegion();
+  });
+</code>