响应式表单 typescript CKEDITOR CustomValueModule

Question

我正在尝试将此 CustomValueModule 转换为 CKEDITOR 控件，但出现不支持标签的错误。组件模板是一个 div 标记，所以我不确定为什么会出现此错误。

https://stackblitz.com/edit/angular-ivy-5kvfys

错误

EXCEPTION: The specified element mode is not supported on element: "editor".

查看

<Editor 
        [formControl]="controlGroup.controls.value" >
</Editor>

组件

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    selector: 'Editor',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => Editor),
            multi: true
        }
    ],
    template: `<div [attr.id]="editorId" contenteditable="true"
                style="width: 100% !important; overflow: hidden"
                class="form-control sentence-part-values-inline sentence-part-values-inline-textbox-number">
                </div>`,
})
export class Editor implements ControlValueAccessor {
    constructor() { }

    onChange: any = () => { }
    onTouch: any = () => { }
    val = ""

    set value(val) {
        if (val !== undefined && this.val !== val) {
            this.val = val
            this.onChange(val)
            this.onTouch(val)
        }

    }

    writeValue(value: any) {
        this.value = value
    }

    registerOnChange(fn: any) {
        this.onChange = fn
    }

    registerOnTouched(fn: any) {
        this.onTouch = fn
    }
}

组件

ngAfterViewInit() {

this.ngZone.runOutsideAngular(() => {
    (<any>window).CKEDITOR.config.autoParagraph = false;
    if (!(<any>window).CKEDITOR.instances[this.editorId]) {

已更新

initControlGroup(fb: FormBuilder) : FormGroup {
    return fb.group({
        "value": [""]            
    });
}

public form: FormGroup = this.formBuilder.group({
    editorValue: ["",Validators.required]
});

当我删除 public 表单时出错：FormGroup 并且只有 initControlGroup

EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

Answer 1

如果您想在这里实现的是创建可以将其值绑定到反应形式的编辑器，那么我就是这么做的。

我发现您的代码存在一些问题。因此，为了提供帮助，我重新编写了带有注释的代码，以便您可以从中受益。

完整工作代码： https://stackblitz.com/edit/angular-ivy-wv9vdi

响应式表单 typescript CKEDITOR CustomValueModule

Reactive Forms typescript CKEDITOR CustomValueModule

angular

typescript

forms

ckeditor

reactive