Search code examples
angularquill

Angular HTML Fields in Quill Editor with two way Binding

Does anyone have information on how I could include HTML fields in Quill? I would like to have numeric fields inline with the text, and use two-way binding for Angular. Quill seems to remove my input fields when binding to the model.

 this.myValue = 5;
 this.myModelVar = "Here is a text box <input [(ngModel)]='myValue' name='myvalue' type='text'></input>

I'm open to just about anything, including creating additional observables, handling the communication in/out of the component myself, whatever I need to do.

However, at this point, I'm struggling just to get the input boxes to appear. Any help would be appreciated.

Solution

  • I found some ugly hack how to inject string including HTML tags into quill editor.

    1. bind quill editor value to the new property [(ngModel)]="valueBind"
    2. after binding use some event that occures before quill editor show (in my case mat-tab-group:selectedIndexChange), and clone the original "value" property into "valueBind" property - now the quill editor shows the value correctly including HTML tags
    3. before save action, copy "valueBind" property back to "value" property.