如何在没有多个工作请求的情况下加载多个 ace 编辑器会话

Question

我有以下代码，基本上加载了三个 JavaScript ace 编辑器会话：

但问题是它为每个会话创建新的 worker-javascript.js 网络请求相同模式 .我应该在单个页面中拥有 10 到 30 个 JavaScript ace-editor 会话的编辑器，以便在 JavaScript 中的不同位置编写不同的函数，所以这正在消耗内存并让我的 Chrome浏览器崩溃，因为它每次都以相同的模式请求工作人员。

以下是我的示例 html 文件：（使用 angular 应用程序）

<!DOCTYPE <!DOCTYPE html>
<html ng-app="editorApp">
<head>
  <title>Ace editor tst</title>
  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/ace-builds/src/ace.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-ace/ui-ace.js"></script>
  <script type="text/javascript" src="bower_components/ace-builds/src/ext-language_tools.js"></script>
  <script type="text/javascript" src="index.js"></script>
  <style type="text/css">
    .e1 { height: 200px; margin-bottom: 5px;}
    .e2 { height: 200px; margin-bottom: 5px;}
    .e3 { height: 200px; margin-bottom: 5px;}
  </style>
</head>
<body ng-controller="appCtrl">
  <div class="e1" ui-ace="{
  workerPath: 'bower_components/ace-builds/src-min-noconflict/',
  useWrapMode : true,
  showGutter: true,
  theme:'twilight',
  firstLineNumber: 1,
  onLoad: aceLoaded,
  onChange: aceChanged,
  require: ['ace/ext/language_tools'],
  advanced: {
  enableSnippets: true,
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true
}
}"></div>
<div class="e2" ui-ace="{
workerPath: 'bower_components/ace-builds/src-min-noconflict/',
useWrapMode : true,
showGutter: true,
theme:'twilight',
firstLineNumber: 1,
onLoad: aceLoaded,
onChange: aceChanged,
require: ['ace/ext/language_tools'],
advanced: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
}
}"></div>
<div class="e3" ui-ace="{
workerPath: 'bower_components/ace-builds/src-min-noconflict/',
useWrapMode : true,
showGutter: true,
theme:'twilight',
firstLineNumber: 1,
onLoad: aceLoaded,
onChange: aceChanged,
require: ['ace/ext/language_tools'],
advanced: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
}
}"></div>
</body>
</html>

以下是我的控制器：(index.js)

var app = angular.module('editorApp', ['ui.ace']);
app.controller('appCtrl', function($scope){
    $scope.aceLoaded = function(_editor){
        var _session = _editor.getSession();
        _session.setMode('ace/mode/javascript');
        var _renderer = _editor.renderer;
        _editor.$blockScrolling = Infinity;
    }

/*    $scope.acesession = "";
    $scope.aceLoaded = function(_editor){
        var _session = "";
        if(!$scope.acesession) {
            _session = _editor.getSession();
            _session.setMode('ace/mode/javascript');
            $scope.acesession = _session;
        }
        else {
            _session = $scope.acesession;
        }

        var _renderer = _editor.renderer;
        _editor.$blockScrolling = Infinity;
    }*/
});

我什至尝试使用与 https://github.com/ajaxorg/ace/issues/344 中讨论的相同会话（上面的注释代码），但没有成功。

如有任何帮助，我们将不胜感激。

Plnkr 在这里http://plnkr.co/edit/lJUAW9EXsiC7RVuga9ia

Answer 1

试试这个。

更新编辑器会话以仅将工作器用于活动的 ace 编辑器。

_editor.on('focus', function () {
    _editor.getSession().setUseWorker(true);
});

_editor.on('blur', function () {
    _editor.getSession().setUseWorker(false);
});
var _session = _editor.getSession();
_session.setUseWorker(false);
_session.setMode('ace/mode/javascript');
var _renderer = _editor.renderer;
_editor.$blockScrolling = Infinity;

工作计划：http://plnkr.co/edit/B1fuFguofn8cwiUEFnyp?p=preview

如何在没有多个工作请求的情况下加载多个 ace 编辑器会话

How can I load multiple ace editor sessions without multiple worker requests

ace-editor

angularjs

angular-ui