【发布时间】：2016-12-21 21:07:09
【问题描述】：
我正在尝试将ace 文本编辑器与angular 一起使用，其中一项需要的行为需要调用ace.require。
我已经包含了适当的文件，但我发现如果我缩小我的 javascript 源代码，那将不再有效。这显然是因为路径变得无效，但我不知道如何处理这种情况，除了在我的优化包之外手动加载提到的文件。我正在使用ASP.NET MVC Web Optimization Framework 将我的 javascript 加载为紧凑且缩小的“捆绑包”。
我正在使用 ui-ace 指令来加载它，但我在没有任何指令的情况下进行了测试，无论我是否通过 Angular，行为都是相同的。
还有其他人发现了解决方法吗？
代码很简单...
捆绑
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 和gulp 重新创建了该行为。
节点 JS/BOWER
首先在 nodejs 中的新文件夹中运行这些命令。
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
bower install angular-ui-ace
咕噜
您可以使用此gulpfile.js 来构建脚本文件。
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'));
});
索引.HTML
这是一个可以重现问题的 HTML 文件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript">
(function () {
var ace = window.ace = window.ace || { };
ace.initialize = function(editor) {
ace.require("ace/ext/language_tools");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/javascript");
// options
editor.setOptions({
showGutter: true,
showPrintMargin: false,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
fontSize: '14px',
fontFamily: 'Consolas'
});
};
})();
</script>
<script type="text/javascript">
angular.module('app', ['ui.ace'])
.controller('HomeController',['$scope', function($scope){
$scope.aceLoaded = function(_editor){
ace.initialize(_editor);
};
$scope.Model = {
Scripting: ""
}
}]);
</script>
</head>
<body ng-app="app" ng-controller="HomeController">
<div ui-ace="{ onLoad: aceLoaded }"></div>
</body>
</html>
【问题讨论】：
-
你能设置一个小提琴吗？
-
我会尽快给你一些东西。我想我想出了一个办法给你一个样品。
-
好的。我已经提供了轻松重新创建整个事物的说明。这有用吗？
标签： javascript angularjs ace-editor