Question

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

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

以下是我的示例html文件:(使用角度应用）

＆＃13;

<!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>

＆＃13;

以下是我的控制器：（index.js）

＆＃13;

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

＆＃13;

我甚至尝试使用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;

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

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

1 个答案: