在Angular 2中更改(ng2-)codemirror的模式 [英] Changing mode for (ng2-)codemirror in Angular 2
问题描述
我设法使ng2-codemirror编辑器在我的Angular 2应用程序中完美工作，但是有一个小细节困扰着我-我无法更改其mode，因为它需要导入我无法执行的.js文件去完成.我需要从路径node_modules\codemirror\mode\clike\clike.js导入script，但是似乎我不知道该怎么做.我尝试将其导入index.html:
I managed to make ng2-codemirror editor work perfectly in my Angular 2 app, but there's one small detail that bugs me - I can't change its mode because it requires importing .js file which I am not able to accomplish. I need to import script from path node_modules\codemirror\mode\clike\clike.js, but it seems I don't know how to do it. I tried to import it in index.html:
<script src="node_modules/codemirror/mode/clike/clike.js"></script>
但是出现以下错误:
未捕获的ReferenceError:未定义CodeMirror
Uncaught ReferenceError: CodeMirror is not defined
我将简化代码，以使问题易于理解:
I'll simplify my code so it's easy to understand the problem:
system.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'ng2-codemirror': 'npm:ng2-codemirror',
'codemirror': 'npm:codemirror'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: { main: './main.js', defaultExtension: 'js' },
rxjs: { defaultExtension: 'js' },
'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
'ng2-codemirror': { main: 'lib/Codemirror.js', defaultExtension: 'js' },
'codemirror': { main: 'lib/codemirror.js', defaultExtension: 'js' }
}
});
})(this);
模块
import { NgModule } from '@angular/core';
import { myComponent } from './myComponent.cmp';
import { SharedModule } from '../shared/shared.module';
import { ROUTING } from './browseClasses.routing';
import { myService } from './myService .service';
import { CodemirrorModule } from 'ng2-codemirror';
@NgModule({
imports: [
SharedModule,
ROUTING,
CodemirrorModule
],
exports: [],
declarations: [
myComponent
],
providers: [
myService
]
})
export class BrowseClassesModule { }
组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: 'app/my_component/myComponent.html'
})
export class MyComponent implements OnInit {
constructor() { }
codeToDisplay: string;
codeConfig = {
lineNumbers: true,
readOnly: true,
mode: "text/x-java" <--- I can't make this work
}
ngOnInit() {
this.codeToDisplay = this.getCode();
}
getCode() {
//...
}
}
模板
<div *ngIf="codeToDisplay">
<codemirror [(ngModel)]="codeToDisplay" [config]="codeConfig"></codemirror>
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<title>ClassLoadingS1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/codemirror/lib/clike.js"></script>
<link rel="stylesheet" type="text/css" href="app/css/styles.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="node_modules/codemirror/lib/codemirror.css" />
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>
<div class="center-div">
<img src="app/css/loading.gif">
</div>
</my-app>
</body>
</html>
推荐答案
好的，我刚刚设法使其正常运行，您需要执行以下操作:
Okay, I just managed to make it work, you need to do the following:
- 在
index.html中添加<script src="node_modules/codemirror/lib/codemirror.js"></script>(非常感谢@PierreDuc) -
导入要在组件中使用的
mode，在我的情况下是clike模式:
- Add
<script src="node_modules/codemirror/lib/codemirror.js"></script>toindex.html(thanks a lot @PierreDuc) Import
modeyou want to use in your component, in my case it wasclikemode:
import 'codemirror/mode/clike/clike';
这篇关于在Angular 2中更改(ng2-)codemirror的模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
