差分

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

--- javascript:ace [2019/07/31 16:41] – ともやん
+++ javascript:ace [2020/06/15 19:46] (現在) – ↷ 移動操作に合わせてリンクを書き換えました。非ログインユーザー
@@ 行 1: / 行 1: @@
+<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");
+      editor.setValue(editor.getValue().trim(), -1);
+      const lines = editor.getSession().getDocument().getLength();
+      editor.setOptions({maxLines: lines});
+    });
+  </script>
+  <style>
+    #ace_editor {
+      margin-bottom: 20px;
+    }
+  </style>
+</html>
 ====== Ace - The High Performance Code Editor for the Web ======
 Ace はJavaScriptで記述された、Webシステムに組み込み可能なコードエディタです。\\
@@ 行 4: / 行 34: @@
 本家: [[https://ace.c9.io/|Ace - The High Performance Code Editor for the Web]]\\
 ソースコード: [[https://github.com/ajaxorg/ace|GitHub - ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)]]\\
+===== エディタデモ =====
+<WRAP prewrap 100% #ace_editor>
+%%/**
+ * In fact, you're looking at ACE right now. Go ahead and play with it!
+ *
+ * We are currently showing off the JavaScript mode. ACE has support for 45
+ * language modes and 24 color themes!
+ */
+function add(x, y) {
+    var resultString = "Hello, ACE! The result of your math is: ";
+    var result = x + y;
+    return resultString + result;
+}
+var addResult = add(3, 2);
+console.log(addResult);%%
+</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>
 ===== インストール =====
@@ 行 14: / 行 87: @@
 ==== ソースコードからのインストール ====
-Ace をソースからビルドするには [[javascript:node_js|node.js]] が必要です。\\
+Ace をソースからビルドするには [[javascript:nodejs|node.js]] が必要です。\\
 \\
 ソースを取得する。
@@ 行 41: / 行 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>