Angular CKEditor 无法设置具有所需值的数据属性

如何解决Angular CKEditor 无法设置具有所需值的数据属性

我正在构建一个使用 CKEditor 的 angular 应用程序。我正在尝试根据从数据库中提取的内容将数据加载到编辑器中，以便用户可以对其进行编辑。这个问题是当我尝试将数据设置为从数据库中提取的字符串时，编辑器始终为空白。但是，当我复制并粘贴字符串（完全相同的字符串）时，它工作得很好。我似乎无法找到这个问题的根源。非常感谢任何帮助。

您可以在底部的图像中看到它应该如何工作，并且即使使用相同的文本直接设置字符串也确实有效，但是当我尝试使用从我的数据库获得的数据时，什么也没有。我认为检查控制台时字符串是正确的。

谢谢。

相关代码 //根据输入对象属性设置值

ngOnChanges() :void{
    console.log(this.currentProduct);
    this.productForm.setValue({
      categoryName : this.currentProduct.category.categoryName,name : this.currentProduct.name,price : this.currentProduct.price,inStock : this.currentProduct.inStock,stockQty : this.currentProduct.stockQty
    });
    this.productDescription = this.currentProduct.desc.valueOf();    
    console.log(this.productForm.value,this.productDescription);
  }

html

<div class="form-control d-flex" style="flex-direction: column">
            <label for="productDescription" class="">Product Description</label>
            <div class="input-group">
              <ckeditor
                [editor]="Editor"
                [data]="productDescription"
                (change)="ckEditOnChange($event)"
                style="width: 100%"
              ></ckeditor>
            </div>
          </div>

它有点工作的例子

  ngOnChanges() :void{
    console.log(this.currentProduct);
    this.productForm.setValue({
      categoryName : this.currentProduct.category.categoryName,stockQty : this.currentProduct.stockQty
    });
    this.productDescription = "<p>this is my description</p>";    
    console.log(this.productForm.value,this.productDescription);
  }

解决方法

我通过在 [formControlName] 角度组件上添加 ckeditor 指令解决了这个障碍。然后你从 ReactiveFormsModule 的普通表单元素中设置/获取值。

注意：在这种情况下，不再需要 data 和 change 属性

 <ckeditor [editor]="Editor" formControlName="FORM_CONTROL_NAME"></ckeditor>