Question

我是angular2中的新人。我用ckeditor创建一个反应形式。一切都很好，但我的ckeditor数据没有发布。它是空的。我是阅读指南并创建此但我无法获得完美的结果。

我是用户表单[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>

Answer 1

我将Angular CLI与ckeditor5一起安装在NPM中。

此CKEditor位于反应形式内。

我已经预制了输入，NgModel和您没有的设置变量看到这里。

您可以尝试将此逻辑转换为Angular 2。

代码：

HTML ：

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

TypeScript ：

// ...
change({ editor }: ChangeEvent) {
  const EditorData = editor.getData();

  this.form.get('description').setValue(EditorData);
}

Answer 2

为什么不简单：

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

为我工作。

Answer 3

HTML Section:
    <div class="form-group">
            <label for="notification">Notification</label>
            <ckeditor [editor]="Editor" [config]="ckconfig" [formControl]="notification"  data="<p>Hello, world!</p>"></ckeditor>
        </div>


TS Section:
        //Import above
        import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

        export class YourComponent implements OnInit {
        public Editor = ClassicEditor;
        ckconfig = {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
          };

        }


    notification = new FormControl('',Validators.required);

只要按照这种方式。参考：Install CKEditor for angular

如何使用＆＃34; ckeditor＆＃34;在Angular2中具有反应形式？

3 个答案:

代码：