I am using angular kolkov editor using formcontrol, have to bind html in my editor

Question

html code:

<angular-editor [placeholder]="'Enter task...'" formControlName="task_note" [config]="editorConfig">
</angular-editor>    

<div class="icon" style="cursor: pointer" (click)="editTaskbtn(task)" (click)="openTask(cont)">
<img src="assets/Deals Icons/Edit icon.svg" style="height: 24px" alt="" srcset="" />
</div>

.ts file:

editorConfig: AngularEditorConfig = { editable: true, spellcheck: true, height: 'auto', minHeight: '0', maxHeight: 'auto', width: 'auto', minWidth: '0', translate: 'yes', enableToolbar: true, showToolbar: true, defaultParagraphSeparator: '', defaultFontName: '', defaultFontSize: '', fonts: [ { class: 'arial', name: 'Arial' }, { class: 'times-new-roman', name: 'Times New Roman' }, { class: 'calibri', name: 'Calibri' }, { class: 'comic-sans-ms', name: 'Comic Sans MS' }, ], customClasses: [ { name: 'quote', class: 'quote', }, { name: 'redText', class: 'redText', }, { name: 'titleText', class: 'titleText', tag: 'h1', }, ], uploadUrl: 'v1/image', uploadWithCredentials: false, sanitize: false, toolbarPosition: 'top', toolbarHiddenButtons: [ [ 'undo', 'redo', 'strikeThrough', 'subscript', 'superscript', 'indent', 'outdent', 'heading', ], [ 'textColor', 'backgroundColor', 'customClasses', 'link', 'unlink', 'insertImage', 'insertVideo', 'insertHorizontalRule', 'removeFormat', 'toggleEditorMode', ], ], };

formcontrol:

  private _initTasksForm() {
    this.tasksFormGroup = this.formBuilder.group({
      contact_owner: ['', Validators.required],
      priority: ['', Validators.required],
      task_type: ['', Validators.required],
      task_reminder: ['', Validators.required],
      custom_reminder: [''],
      date_time: ['', Validators.required],
      task_note: ['', Validators.required],
      isClosed: [''],
    });
  }

data to be bind { "_id": "670cb62498a51532489dd41f", "customer_id": "OGYCON1728883573551", "createdBy": "OGYU1728878104362", "type": "tasks", "priority": "None", "param": { "contact_owner_unqid": "OGYU1728878104362", "priority": "None", "task_type": "To-do", "task_reminder": "No reminder", "custom_reminder": "", "date_time": "2024-10-18T06:11:32.000Z", "task_note": "<ul><li>tesss</li><li>decfecfc</li></ul>", "isClosed": false, "contact_owner": "userabc", "contact_name": "no-name" }, "unqid": "OGYPRO1728886308384", "org_id": "ORG1728531905160", "created_at": "2024-10-14T06:11:48.451Z", "updated_at": "2024-10-14T06:11:48.451Z", "__v": 0 }

when submitting the data using the editor data is saved as HTML, but after that when I open the editor to view the data to get edit, in angular kolkov editor data is displayed as
<ul><li>ccccc</li><li>aaaa</li><li>bbbb</li></ul>

Kindly share your Angular Reactive Forms module

kibet
– kibet

2024-10-11 12:51:37 +00:00
Commented Oct 11, 2024 at 12:51 — kibet
– kibet, Commented Oct 11, 2024 at 12:51

Joshna J.U · Accepted Answer · 2024-10-15 09:15:01Z

0

private _setTasksData(task) {
     ....
    this.tasksForm?.['task_note'].setValue(
      this.transform(task.param.task_note)
    );
  }

  transform(value: any): any {
    return value.split('&lt;').join('<').split('&gt;').join('>');
  }

above code fixed my issue, code is working now.

answered Oct 15, 2024 at 9:15

Joshna J.U

275 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I am using angular kolkov editor using formcontrol, have to bind html in my editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related