====== Ace - The High Performance Code Editor for the Web ====== Ace はJavaScriptで記述された、Webシステムに組み込み可能なコードエディタです。\\ \\ 本家: [[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)]]\\ ===== エディタデモ ===== %%/** * 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);%%

===== インストール ===== ==== ビルド済みファイルからのインストール ==== ビルド済みファイルを取得する。


$ git clone https://github.com/ajaxorg/ace-builds.git

==== ソースコードからのインストール ==== Ace をソースからビルドするには [[javascript:nodejs|node.js]] が必要です。\\ \\ ソースを取得する。


$ git clone git://github.com/ajaxorg/ace.git

npm (node package manager) で Ace のビルドに必要な依存パッケージをインストールする。


$ cd ace
$ npm install

※npm は ace ディレクトリ直下の package.json を参照して自動でインストールしてくれます。 Ace をビルドする。


$ make build

ビルドが終わると実行に必要なファイル群が ace/build に生成されます。 === 更新 ===


$ cd ace
$ git pull
$ make build

===== //#region [リージョンの説明] 〜 //#endregion までをデフォルトで折り畳む方法 ===== 実際のデモは以下にある。\\ [[javascript:ide|IDE Labo - 総合開発環境の実験的実装]]\\


  //#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();
  });