将CodeMirror与Angular2集成(打字稿) [英] Integrating CodeMirror with Angular2 (typescript)
问题描述
我目前正在将CodeMirror编辑器添加到一个项目(更准确地说是Angular2项目)中.但是我在做这件事时遇到了麻烦.我的编辑器的实例化似乎无法正常工作.我的代码如下:
I'm currently working on adding a CodeMirror editor to a project, an Angular2 project more precisely. But Im' having trouble doing it. The instantiation of my editor doesn't seem to work correctly. My code is the following:
editor.component.ts
import {Component} from 'angular2/core'
import {BrowserDomAdapter} from 'angular2/platform/browser'
declare var CodeMirror: any;
@Component({
selector: 'editor',
templateUrl: './meang2app/partials/editor.html'
})
export class Editor{
dom: BrowserDomAdapter;
editor: any;
constructor(){
this.dom = new BrowserDomAdapter();
this.editor = new CodeMirror.fromTextArea(this.dom.query("textarea"), {lineNumbers: true, mode: {name: "javascript", globalVars: true}});
}
}
editor.html
<textarea id="code" name="code">
<!-- Where a CodeMirror instance should be rendered -->
</textarea>
在我的 index.html 文件中，我会执行以下操作:
In my index.html file, I do something like this:
<html>
<head>
<title>Angular 2</title>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/addon/hint/javascript-hint.js"></script>
<script src="codemirror/mode/javascript/javascript.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/dist/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app>Loading</app>
</body>
</html>
我以这种方式引导我的应用程序，但我不认为这是问题的根源.
I'm bootstrapping my app this way, but I don't think that's where the issue comes from.
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
当我尝试运行该应用程序时，firefox告诉我'EXCEPTION:在编辑器实例化期间出错！.'，而'ORIGINAL EXCEPTION:TypeError:textarea为null'.关于发生了什么以及如何解决这个问题的任何想法吗?
When I try and run the app, firefox tells me that 'EXCEPTION: Error during instantiation of Editor!.', and that 'ORIGINAL EXCEPTION: TypeError: textarea is null' as well. Any idea about what's going on, and how to fix this?
我很感激
推荐答案
您应避免按照 angular 2文档.特别是，您应该避免:
You should refrain from using ElementRef as per angular 2 documentation. Particularly, you should avoid:
您的应用程序和渲染层之间的紧密耦合，这将使得不可能将两者分开并将您的应用程序部署到Web Worker中.
tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.
改为使用 Renderer2 :
editor.directive.ts
@Directive({
selector: '[editor]'
})
export default class EditorDirective {
editor: any;
constructor(private _renderer: Renderer) {}
ngAfterViewInit() {
this.editor = CodeMirror.fromTextArea(
this._renderer.selectRootElement('[editor]'),
{
lineNumbers: true,
mode: {name: "javascript", globalVars: true}
}
);
}
}
这篇关于将CodeMirror与Angular2集成(打字稿)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
