>

angular2의 새로운 기능입니다. ckeditor를 사용하여 반응 형을 만듭니다. 모두 잘되지만 내 ckeditor 데이터는 게시되지 않습니다. null입니다. 가이드를 읽고 작성했지만 완벽한 결과를 얻을 수 없습니다.

i m user form [formGroup] createPage로이 양식에 ckditor를 사용하십시오. 하지만 ckeditor의 데이터를 얻을 수 없습니다. 양식을 사용하여 ckeditor에서 데이터를 얻는 방법은 무엇입니까? 양식 제출 버튼 클릭으로.

이것은 내 ckeditor.ts 파일입니다

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'CKEDITOR',
  template: `
     <textarea name="targetId" id="targetId"  rows="rows" cols="cols">
         {{content}}
     </textarea>`
})
export class AdminCkeditorComponent implements OnInit {
  content: any = "test content";
  @Input() targetId;;
  @Input() rows = 10;
  @Input() cols;     
  constructor() { }
  ngOnInit(){
    window['CKEDITOR']['replace']( 'targetId' );
  }
}

이것은 page.ts 파일입니다

import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit, Directive, ViewChild, ElementRef } from '@angular/core';
import {Http, Response, Headers, RequestOptions} from "@angular/http";
import {Observable} from "rxjs/Rx";
import 'rxjs/add/operator/map'
@Component({
  selector: 'app-create-page',
  templateUrl: './create-page.html'
})
export class CreatePageComponent implements OnInit {
  constructor (private http: Http) {}
  ngOnInit() {}
  createPage = new FormGroup({
    pageTitle: new FormControl(),
    pageUrl: new FormControl(),
    pageHeader: new FormControl(),
    pageBody: new FormControl()
  })
  public result : String;
  onSubmitPage(){
    console.log(this.createPage.value.pageTitle);
    console.log(this.createPage.value.pageUrl);
    console.log(this.createPage.value.pageHeader);
    console.log(this.createPage.value.pageBody);
      let headers = new Headers();
       headers.append('Content-Type', 'application/x-www-from-urlencoded');
       headers.append('Access-Control-Allow-Origin', '*');
      let options = new RequestOptions();
      let body =this.createPage.value;
       this.http.post('http://192.168.0.130:8012/api/createPage', body, options)
       .map(res => res.json())
       .subscribe(
         data => this.result = data,
         err => console.log('ERROR!!!'+err),
         () => console.log('Got response from API', this.result)
       );
  }
}

이것은 HTML 파일입니다

<form [formGroup]="createPage" (ngSubmit)="onSubmitPage()">
       <input type="text" name="pageTitle" formControlName="pageTitle" class="form-control">
       <input type="text" name="pageUrl" formControlName="pageUrl" class="form-control" >
       <textarea name="pageHeader" formControlName="pageHeader" class="form-control"></textarea>
       <CKEDITOR></CKEDITOR> 
       <button class="btn btn-info pull-right">Sign in</button>
</form>

  • 답변 # 1

    NPM과 함께 설치된 ckeditor5와 함께 Angular CLI를 사용하고 있습니다.

    이 CKEditor는 반응 형 안에 있습니다.

    와이즈 비즈

    이 논리 중 일부를 Angular 2로 변환하려고 시도 할 수 있습니다.

    코드 :

    HTML:

    I havepre-madethe Input, the NgModel and the setting variable which you don't see here.

    TypeScript:

    //...
    <ckeditor [editor]="Editor" [config]="EditorConfig" (change)="change($event)" [(ngModel)]="editorData" [ngModelOptions]="{standalone: true}"></ckeditor>
    
    

  • 답변 # 2

    단순하지 않은 이유 :

    // ...
    change({ editor }: ChangeEvent) {
      const EditorData = editor.getData();
      this.form.get('description').setValue(EditorData);
    }
    
    

    나를 위해 일하십시오.

    <form [formGroup]="form"> <ckeditor [config]="config" formControlName="[YOUR_FORMCONTROL_NAME]"></ckeditor> </form>

  • 이전 unity3d - 페이스 북 SDK와 청중 네트워크 SDK가 모두 통합 된 프로젝트를 만들 수 없습니다
  • 다음 c# - 동일한 기능으로 생성 한 후 업데이트하면 "{id}의 동일한 키 값이 이미 추적되고 있습니다"예외가 발생 함