Zugriff auf Codemirror-Textbereich in Angular2-Komponente?

Question

Ich versuche Codemirror mit Angular 2 (TypeScript) zu verknüpfen. Derzeit kann ich CodeEditor mit einer benutzerdefinierten codearea-Direktive anzeigen, die dynamisch eine Skriptdatei lädt und den Textbereich formatiert.

Ich bin nicht in der Lage, den Wert zu erhalten, der Benutzer im Textbereich, ich habe versucht, NgModel, value etc, ich denke, Codemirror ist das Entfernen der Textarea und wieder Einfügen, die möglicherweise einen Fehler verursachen.

Ich habe versucht, Onchange und Keyup Event Handler zu verwenden, aber sie werden wiederholt aufgerufen, wenn alles in den Textbereich eingegeben wird. Das ist nicht sinnvoll.

Hier ist der Code of Code-Gebiet Komponente:

import {Component, AfterViewChecked,AfterViewInit} from 'angular2/core'; 

@Component({ 
    selector: 'code-area', 
    template: ` 
    <input [(ngModel)]="ic_code"> 
    <textarea [(ngModel)]="ic_code" id='problem2' name='problem2' rows='10' cols='80'> 

    </textarea> 
    <div> 
    <textarea [(ngModel)]="ic_code" id='problem1' name='problem2' rows='10' cols='80'> 
    int main(){ 

    } 
    </textarea> 
    </div> 
    <button (click)="submit_clicked()">Submit</button> 
    <input [(ngModel)]="ic_code"> 
    ` 
}) 
export class CodeArea implements AfterViewInit,AfterViewChecked{ 
    public ic_code; 
    public ic_code2; 
    public ic_codediv; 
    constructor(){ 
     this.ic_code = ""; 
     System.import('app/applycodemirror') 
      .then(refToLoadedScript => { 
       applycodestyle(); 
      }); 
    } 

    ngAfterViewInit(){ 
     console.log("AFter view init called in CodeArea"); 
    } 
    ngAfterViewChecked(){ 

    } 
    onChange(){ 
     //This is being repeatedly called 
    } 
    submit_clicked() { 
     //I need the code here ,when user clicks on submit 
    } 
    onKey(event: any) { 
     console.log(event.target.value+' '); 
    } 

} 

Hier ist die externe js

function applycodestyle(){ 
     if(document.getElementById("problem1") != null){ 
     console.log("Problem 1 present"); 
     var cEditor = CodeMirror.fromTextArea(document.getElementById("problem1"), { 
      lineNumbers: true, 
      matchBrackets: true, 
      mode: "text/x-csrc", 
     }); 
     }else{ 
     console.log("Problem 1 null"); 
     } 
} 

Answer 1

Datei Ich benutze es ein wenig anders, aber vielleicht wird es Ihnen helfen. Basiaclly in ngAfterViewInit erstellen I-Code-Spiegel-Instanz mit ElementRef:

this.cm = CodeMirror(this.elementRef.nativeElement, options); 

dann im onChange Ereignis:

this.cm.on('change', (editor: CodeMirror.Editor) => { 
    editor.getDoc().getValue(); 
}); 

Wenn Sie onChange nicht verwenden möchten, können Sie immer den Wert von Code erhalten können Spiegel-Instanz, z.

cmInstance.getEditor().getDoc().getValue() 

Answer 2

können Sie verwenden ng2-codemirror

Installieren

npm install ng2-codemirror --save

Setup-

systemjs.config.js

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    var data = { 
     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: '/Template/js/kpxl/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', 

      //Add these code mirror packages 
      'ng2-codemirror': 'npm:ng2-codemirror', 
      'codemirror': 'npm:codemirror', 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      codemirror: { 
       main: 'lib/codemirror.js', 
       defaultExtension: 'js' 
      } 
     } 
    }; 
    data.packages['ng2-codemirror'] = { main: 'lib/index.js', defaultExtension: 'js' }; 
    System.config(data); 
})(this); 

Verwenden Beispiel

Fügen Codemirror CSS-Dateien auf Ihrer Seite

<link href="/node_modules/codemirror/lib/codemirror.css" rel="stylesheet" /> 
<link href="/node_modules/codemirror/theme/ambiance.css" rel="stylesheet" /> 

Fügen Sie CodemirrorModule in Ihrem Hauptmodul:

import { CodemirrorModule } from 'ng2-codemirror'; 

@NgModule({ 
    // ... 
    imports:  [ 
    CodemirrorModule 
    ], 
    // ... 
}) 
export class AppModule { } 

---

Verwenden Sie in Ihrem beliebigen Component.

import { Component } from 'angular2/core'; 

@Component({ 
    selector: 'sample', 
    template: ` 
    <codemirror [(ngModel)]="code" 
     [config]="{...}" 
     (focus)="onFocus()" 
     (blur)="onBlur()"> 
    </codemirror> 
    ` 
}) 
export class Sample{ 
    constructor(){ 
    this.code = `// Some code...`; 
    } 
}