1

我正在尝试从 ckEditor 获取更改后的值，即文本并将结果输出发送给父级。

下面是对应的代码：

editor.component.html：

 <ckeditor  tagName="textarea" [config]="config"  
            [data]="text" (change)="onValueChange($event)" formControlName="text"></ckeditor>

编辑器.component.ts

export class TextEditorWithLimitedWidgetsComponent implements OnInit, AfterViewChecked, OnChanges  {

constructor(
private fb: FormBuilder,
private fileValidations: FileValidations,
private cdref: ChangeDetectorRef
) { }



@Input() text: string;

@Output() textValue = new EventEmitter();

form: FormGroup;

ngOnInit() {

this.form = this.fb.group({
  text: ['', [
    Validators.required,
    CustomValidator.textEditor(30)
  ]]
});

  this.form.setValue({
    text: this.text
  });
}


get f() {
return this.form.controls;
}

ngAfterViewChecked() {
  // this.textValue.emit(this.form.controls);
// this.cdref.detectChanges();
// 
//  not working...
}


onValueChange(e) {

    this.cdref.detectChanges();
 }


ngOnChanges(changes: SimpleChanges): void {
  this.textValue.emit(this.form.controls);
 }
}

父组件.html

            <app-editor [descriptionLimit]="50"  [text]="inputData.title" (input)="(inputData.title = $event.target.value);" (textValue)="getTextValue($event)"></app-editor>

父组件.ts

 getTextValue(event) {


   const dataWithHTMLTags = event.text.value.toString();
   this.inputData.title = this.fileValidations.stringsWithoutHTMLTags(dataWithHTMLTags);


    console.log(this.inputData.title); // error..
  }

我也尝试过ngAfterContentChecked但以同样的错误告终。

4

1 回答 1

1

Output发出内部生命周期方法会导致您的问题。应该textValue发出控件对象还是只发出ckeditor控件的值？您可以通过以下方式简化表单初始化

this.form = this.fb.group({
  text: [this.text, [
    Validators.required,
    CustomValidator.textEditor(30)
  ]]
});
}

onValueChange(e) {
    this.cdref.detectChanges();
 }

没有必要，角度事件会触发变化检测本身

(input)="(inputData.title = $event.target.value);"

不起作用，您的组件中没有定义@Output名称。input

查看此文档以了解组件交互

如果我猜对了，你会做这个 ckeditor-change

onValueChange({ editor }: ChangeEvent): void {
   this.textValue.emit(editor.getData());
}
于 2019-12-09T09:11:18.713 回答