добавить данные для редакторов quill существующих данных угловых - PullRequest
Новая
       38

добавить данные для редакторов quill существующих данных угловых

0 голосов
/ 16 мая 2019

Я работаю над требованием, при котором я должен добавить данные в контейнер, который является контейнером 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 (или), если курсор отсутствует в редакторе в начальной точке.Любая помощь будет оценена.Спасибо.

1 Ответ

0 голосов
/ 23 мая 2019

Надеюсь, это кому-нибудь поможет.Я решил это с помощью регистрации метода 'onEditorCreated ()' quill-редактора, как показано ниже: 

<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);
 }
}
...