如何访问Angular2组件codeMIRROR文本区域价值？ [英] How to Access codemirror text area value in Angular2 Component?

问题描述

我试图链接codeMIRROR与角2（打字稿）。
现在，我可以用codeAREA定制指令，动态加载脚本文件，并格式化文本区域显示codeEditor。

我不能够得到的价值，在文本区域的用户类型，我已经试过NgModel，价值等，我想codeMIRROR被删除textarea的，然后重新重新插入，这可能会导致错误。

我试图用平变化和KeyUp事件处理程序，但他们时，在文本区域。所以这心不是有用输入任何内容被反复调用。

下面为code-区域组件的code：

 进口{组件，AfterViewChecked，AfterViewInit}从'angular2 /核心;@零件（{
    选择：code-区，
    模板：`
    ＆LT;输入[（ngModel）] =IC_ code＆GT;
    ＆LT; textarea的[（ngModel）] =IC_ codeID ='problem2的名字='problem2行= '10'COLS =80＆GT;    ＆LT; / textarea的＆GT;
    ＆LT; D​​IV＆GT;
    ＆LT; textarea的[（ngModel）] =IC_ codeID =问题1NAME ='problem2行= '10'COLS =80＆GT;
    诠释主（）{    }
    ＆LT; / textarea的＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;按钮（点击）=submit_clicked（）＆GT;提交＆LT; /按钮＆GT;
    ＆LT;输入[（ngModel）] =IC_ code＆GT;
    `
}）
出口类codeAREA实现AfterViewInit，AfterViewChecked {
    公共IC_ code;
    公共IC_ code2;
    公共IC_ codeDIV;
    构造函数（）{
        this.ic_ code =;
        System.import（应用程序/应用codeMIRROR'）
            。然后（refToLoadedScript =＆GT; {
                适用于codestyle（）;
            }）;
    }    ngAfterViewInit（）{
        的console.log（后视图初始化称为codeAREA）;
    }
    ngAfterViewChecked（）{    }
    的onChange（）{
        //这个被反复调用
    }
    submit_clicked（）{
        //我需要code在这里，当用户点击提交
    }
    安其（事件：任意）{
        的console.log（event.target.value +''）;
    }}
 

下面是外部JS文件

 函数应用于codestyle（）{
      如果（的document.getElementById（问题1）！= NULL）{
        的console.log（问题1 present）;
        VAR cEditor = codeMirror.fromTextArea（的document.getElementById（问题1）{
          lineNumbers：真实，
          matchBrackets：真实，
          模式：文/ X-证监会
        }）;
      }其他{
        的console.log（问题1空）;
      }
}
 

解决方案

我用它一点点不同，但也许它会帮助你。
Basiaclly在ngAfterViewInit我创建一个使用elementRef code镜像实例：

  this.cm = codeMIRROR（this.elementRef.nativeElement，期权）;
 

然后在onChange事件：

  this.cm.on（'改变'，（责任编辑：codeMirror.Editor）=＆GT; {
  。editor.getDoc（）的getValue（）;
}）;
 

如果你不想使用的onChange，你总是可以得到code镜像实例的值，例如。

  cmInstance.getEditor（）。getDoc（）的getValue（）
 

I am trying to link codemirror with Angular 2 (TypeScript) . Right now ,I am able to display CodeEditor using a codearea custom directive ,which dynamically loads a script file and Formats the text area .

I am not able to get the value ,the user types in the text area ,I have tried NgModel,value etc ,I think codemirror is removing the textarea and re inserting it again ,that might cause an error .

I have tried to use onchange and keyup event handlers ,but they are being repeatedly called when anything is entered in the text area .So that isnt usefull.

Here is the Code of code-Area Component :

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+' ');
    }

}

Here is the external js file

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");
      }
}

解决方案

I use it a little bit differently but maybe it will help you. Basiaclly in ngAfterViewInit I create code mirror instance using elementRef:

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

then in the onChange event:

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

If you don't want to use onChange, you can always get the value from code mirror instance, eg.

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

这篇关于如何访问Angular2组件codeMIRROR文本区域价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！