将数据附加到 quill 编辑器现有数据 angular
append data to quill editors existing data angular
我正在处理一项要求,我必须将数据附加到一个容器,该容器是 angular 中的 quill-editor 容器。我尝试了不同的方法,但都没有用。
我在下面试过:
Try-1
this.mailTemplateForm.controls['body'].patchValue(value)
Try-2
this.mailTemplateForm.controls.body.setValue(value);
然后现有数据将被新数据替换。有什么解决办法。
component.ts:
import { QuillEditorComponent } from 'ngx-quill';
export class EditMailTemplateComponent implements OnInit {
@ViewChild('description') description: QuillEditorComponent;
mailTemplateForm: FormGroup;
ngOnInit() {
this.getFormData();
}
editForm(){
//console.log('test',this.data);
this.mailTemplateForm = this.fb.group({
id: 0,
name: [''],
slug: [''],
status: [''],
subject: [''],
body: [],
body_parameters: [''],
});
}
getFormData(){
-----------
-----------
this.editForm();
this.mailTemplateForm.patchValue(this.data.form_data);
}
appendTagTo(value: any){
console.log('called - ',value);
this.mailTemplateForm.controls.body.setValue(value); // Tried here
}
component.html
<ul class="list-style-none mt-0">
<li *ngFor="let field of fieldList" class="py-4 text-uppercase">
<a color='accent' class='cursor-pointer' (click)="appendTagTo(field.field_name)"> {{ field.label_name }}
</a>
</li>
</ul>
<div fxFlex="75" class="mt-12">
<quill-editor [style.display]="'block'" [style.height]="'400px'" formControlName="body" #description>
</quill-editor>
</div>
我希望在光标出现在 quill-editor 中的任何地方添加数据(或者)如果光标不在编辑器中的起始点。任何帮助,将不胜感激。谢谢。
希望这对某人有所帮助。我已经通过使用注册 quill-editor 的 'onEditorCreated()' 方法解决了这个问题,如下所示:
<quill-editor [style.display]="'block'" [modules]="editorOptions.editor"
(onEditorCreated)="onEditorCreated($event)" [style.height]="'300px'" formControlName="body" #description>
</quill-editor>
component.ts:
public editor;
onEditorCreated(event) {
this.editor = event;
}
appendTagTo(textTOInsert: string) {
if(textTOInsert){
textTOInsert = '{{'+textTOInsert+'}}';
const selection = this.editor.getSelection(true);
this.editor.insertText(selection.index, textTOInsert);
//this.editor.insertHTML(selection.index, textTOInsert);
}
}
我正在处理一项要求,我必须将数据附加到一个容器,该容器是 angular 中的 quill-editor 容器。我尝试了不同的方法,但都没有用。
我在下面试过:
Try-1
this.mailTemplateForm.controls['body'].patchValue(value)
Try-2
this.mailTemplateForm.controls.body.setValue(value);
然后现有数据将被新数据替换。有什么解决办法。
component.ts:
import { QuillEditorComponent } from 'ngx-quill';
export class EditMailTemplateComponent implements OnInit {
@ViewChild('description') description: QuillEditorComponent;
mailTemplateForm: FormGroup;
ngOnInit() {
this.getFormData();
}
editForm(){
//console.log('test',this.data);
this.mailTemplateForm = this.fb.group({
id: 0,
name: [''],
slug: [''],
status: [''],
subject: [''],
body: [],
body_parameters: [''],
});
}
getFormData(){
-----------
-----------
this.editForm();
this.mailTemplateForm.patchValue(this.data.form_data);
}
appendTagTo(value: any){
console.log('called - ',value);
this.mailTemplateForm.controls.body.setValue(value); // Tried here
}
component.html
<ul class="list-style-none mt-0">
<li *ngFor="let field of fieldList" class="py-4 text-uppercase">
<a color='accent' class='cursor-pointer' (click)="appendTagTo(field.field_name)"> {{ field.label_name }}
</a>
</li>
</ul>
<div fxFlex="75" class="mt-12">
<quill-editor [style.display]="'block'" [style.height]="'400px'" formControlName="body" #description>
</quill-editor>
</div>
我希望在光标出现在 quill-editor 中的任何地方添加数据(或者)如果光标不在编辑器中的起始点。任何帮助,将不胜感激。谢谢。
希望这对某人有所帮助。我已经通过使用注册 quill-editor 的 'onEditorCreated()' 方法解决了这个问题,如下所示:
<quill-editor [style.display]="'block'" [modules]="editorOptions.editor"
(onEditorCreated)="onEditorCreated($event)" [style.height]="'300px'" formControlName="body" #description>
</quill-editor>
component.ts:
public editor;
onEditorCreated(event) {
this.editor = event;
}
appendTagTo(textTOInsert: string) {
if(textTOInsert){
textTOInsert = '{{'+textTOInsert+'}}';
const selection = this.editor.getSelection(true);
this.editor.insertText(selection.index, textTOInsert);
//this.editor.insertHTML(selection.index, textTOInsert);
}
}