捆绑

Question

我正在尝试将ace文字编辑器与angular一起使用，其中一项所需行为需要调用ace.require。

我已经包含了相应的文件，但我看到如果我缩小我的javascript源代码，那就不再适用了。这显然是因为路径变得无效，但我不确定如何处理这种情况，除了在我的优化包之外手动加载所提到的文件。我使用ASP.NET MVC Web Optimization Framework加载我的javascripts作为＆＃34;捆绑＆＃34;这是紧凑和缩小的。

我正在使用 ui-ace 指令来加载它，但我已经测试过没有任何指令，无论我是否通过角度，行为都是一样的。

还有其他人发现了解决方法吗？

这是非常简单的代码......

捆绑

bundles.Add( new ScriptBundle( "~/bundles/js/ace" )
    // include the ace text editor
    .Include( "~/application/assets/scripts/ace/ace.js" )
    .Include( "~/application/assets/scripts/ace/ext-language_tools.js" )));

的Javascript

    if (angular.isDefined(opts.require)) {
        opts.require.forEach(function (n) {
            window.ace.require(n);
        });
    }

这也可以明确键入......

ace.require('ace/ext/language_tools');

HTML

<div ng-model="Model.Scripting"
     ui-ace="{
        useWrapMode: true,
        showGutter: true,
        theme: 'chrome',
        mode: 'javascript',
        require: ['ace/ext/language_tools'],
        advanced: {
            enableSnippets: true,
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true
        }
    }">
</div>

如何重现

由于我无法找到一种方法来完全按照需要将整件事情发送给您，因此我使用nodejs，bower和{{1}重新创建了行为}。

NODE JS / BOWER

首先在nodejs中的新文件夹中运行这些命令。

gulp npm install bower npm install gulp npm install gulp-concat npm install gulp-rename npm install gulp-uglify

npm install run-sequence bower install angular bower install ace-builds

GULP

您可以使用此bower install angular-ui-ace来构建脚本文件。

gulpfile.js

INDEX.HTML

这是一个可以重现问题的HTML文件。

var
  gulp = require('gulp'),
  concat = require('gulp-concat'),
  rename = require('gulp-rename'),
  uglify = require('gulp-uglify'),
  sequence = require('run-sequence');

gulp.task('default', function() {
  return sequence([
    "ace"
  ]);
});

gulp.task('ace', function() {
  return gulp.src([
    'bower_components/angular/angular.js',
    'bower_components/angular-ui-ace/ui-ace.js',

    'bower_components/ace-builds/src-noconflict/ace.js',
    'bower_components/ace-builds/src-noconflict/mode-javascript.js',
    'bower_components/ace-builds/src-noconflict/worker-javascript.js',
    'bower_components/ace-builds/src-noconflict/theme-chrome.js',
    'bower_components/ace-builds/src-noconflict/snippets/text.js',
    'bower_components/ace-builds/src-noconflict/snippets/javascript.js'])
    .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest('js'));
});

Answer 1

要使ace.require工作，您需要将ext-language_tools添加到gulp.task("ace")

'bower_components/ace-builds/src-noconflict/ace.js',
'bower_components/ace-builds/src-noconflict/ext-language_tools.js',
'bower_components/ace-builds/src-noconflict/mode-javascript.js',

因为需要在webworker中加载，所以捆绑中不需要

bower_components/ace-builds/src-noconflict/worker-javascript.js。为此，您需要将workerPath配置为指向正确的文件夹

ace.initialize = function(editor) {
    ace.require("ace/config").set("workerPath",
        "bower_components/ace-builds/src-min-noconflict");
    ace.require("ace/ext/language_tools");

并且因为它的高度设置为0而最初无法看到ace，请参阅此问题：Ace editor doesn't work with bootstrap

另请注意，fontFamily: 'Consolas'可能会在缺少该字体的系统上出现问题，因此最好将后备广告添加到等宽广如fontFamily: 'Consolas', monospace

Answer 2

如果以上解决方案不适合您（工作人员仍未正确加载），请参阅我在github（lahdo）上的回答：

https://github.com/angular-ui/ui-ace/issues/106

Ace文本编辑器 - ＆＃34;要求＆＃34;如果源被缩小则失败

捆绑