Cie*_*iel 1 javascript ace-editor angularjs
我试图使用ace文本编辑器angular,其中一个需要的行为需要调用ace.require.
我已经包含了相应的文件,但我看到如果我缩小我的javascript源代码,那就不再适用了.这显然是因为路径变得无效,但我不确定如何处理这种情况,除了在我的优化包之外手动加载所提到的文件.我ASP.NET MVC Web Optimization Framework用来加载我的javascripts作为紧凑和缩小的"捆绑".
我正在使用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" )));
if (angular.isDefined(opts.require)) {
opts.require.forEach(function (n) {
window.ace.require(n);
});
}
这也可以明确键入...
ace.require('ace/ext/language_tools');
<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.
首先在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文件.
<!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>
对于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',
bower_components/ace-builds/src-noconflict/worker-javascript.js因为它需要在webworker中加载,所以在bundle中不需要.为此,您需要将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编辑器不能与引导程序一起使用
另请注意,fontFamily: 'Consolas'在缺少该字体的系统上可能会出现问题,因此最好将备用数据添加到等宽字体中fontFamily: 'Consolas', monospace
| 归档时间： |
|
| 查看次数： |
4457 次 |
| 最近记录： |