问题描述
我正在构建一个使用 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>