javascript:ace

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:ace [2019/08/19 07:23] – ともやんjavascript:ace [2020/06/15 19:46] (現在) – ↷ 移動操作に合わせてリンクを書き換えました。 非ログインユーザー
行 1: 行 1:
 <html> <html>
-  <script src='/_media/javascript/ace/ace.js'></script> +  <script src='/_media/javascript/ace/src-noconflict/ace.js'></script> 
-  <script src="/_media/javascript/ace/ext-static_highlight.js"></script>+  <script src="/_media/javascript/ace/src-noconflict/ext-static_highlight.js"></script>
   <!--[if lt IE 9]>   <!--[if lt IE 9]>
-    <script src="/_media/javascript/ace/ext-old_ie.js"></script>+    <script src="/_media/javascript/ace/src-noconflict/ext-old_ie.js"></script>
   <![endif]-->   <![endif]-->
-  <script src="/_media/javascript/ace/mode-json.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/mode-json.js"></script> 
-  <script src="/_media/javascript/ace/mode-html.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/mode-html.js"></script> 
-  <script src="/_media/javascript/ace/mode-javascript.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/mode-javascript.js"></script> 
-  <script src="/_media/javascript/ace/ext-emmet.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/ext-emmet.js"></script> 
-  <script src="/_media/javascript/ace/ext-language_tools.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/ext-language_tools.js"></script> 
-  <script src="/_media/javascript/ace/snippets/text.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/snippets/text.js"></script> 
-  <script src="/_media/javascript/ace/snippets/javascript.js"></script> +  <script src="/_media/javascript/ace/src-noconflict/snippets/javascript.js"></script> 
-  <script src="/_media/javascript/ace/snippets/html.js"></script>+  <script src="/_media/javascript/ace/src-noconflict/snippets/html.js"></script>
   <script>   <script>
     jQuery(function($) {     jQuery(function($) {
-      var editor = ace.edit("ace_editor");+      const editor = ace.edit("ace_editor");
       editor.setTheme("ace/theme/chrome");       editor.setTheme("ace/theme/chrome");
       editor.session.setMode("ace/mode/javascript");       editor.session.setMode("ace/mode/javascript");
 +      editor.setValue(editor.getValue().trim(), -1);
 +      const lines = editor.getSession().getDocument().getLength();
 +      editor.setOptions({maxLines: lines});
     });     });
   </script>   </script>
   <style>   <style>
     #ace_editor {     #ace_editor {
-      height: 300px;+      margin-bottom: 20px;
     }     }
   </style>   </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!  * In fact, you're looking at ACE right now. Go ahead and play with it!
  *  *
行 50: 行 51:
  
 var addResult = add(3, 2); var addResult = add(3, 2);
-console.log(addResult); +console.log(addResult);%%
-</pre> +
-</html>+
 </WRAP> </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 $ make build
 </code> </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>
 +
  • javascript/ace.1566166999.txt.gz
  • 最終更新: 2019/08/19 07:23
  • by ともやん