3

I have a form with quill text editor.

<quill-editor [modules]="quillConfig" (onEditorCreated)="getEditorInstance($event)"></quill-editor>

I have an image gallery in a modal, which is filled with my images, and I would like that, if I select an image from modal put the img tag after the text in the editor.

This is the code of one image what I want to add: 

<div class="news-image-box">
  <img src="${image.path}" alt="${image.description}">
  <div class="row">
    <div class="col-md-9"><p>${image.description}</p></div>
    <div class="col-md-3 news-image-credit"><p>${image.credit}</p></div>
  </div>
</div>

My problem is that the contenteditable div of Quill (which is the div for my text and it has "ql-editor" css class) is generated, so I can't give a local reference for using @ViewChild... (or I don't know how)

document.getElementsByClassName('ql-editor')[0].innerHTML += imageElement;

I tried to get the content of "ql-editor" div by a sample getElementsByClassname and just added my img tag to it, but the angular throws this error: 

core.js:1673 ERROR TypeError: Cannot read property 'emit' of undefined
at Scroll.update (quill.js:4329)
at MutationObserver.<anonymous> (quill.js:7118)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runGuarded (zone.js:151)
at MutationObserver.<anonymous> (zone.js:129)

I works with just a string btw... 

document.getElementsByClassName('ql-editor')[0].innerHTML += 'something';
zgue
  • 3,793
  • 9
  • 34
  • 39
Zsolt Üveges
  • 31
  • 1
  • 6

2 Answers2

4

You can go with ngModel, it is clearly mentioned in documentation. Reference: ngx-quill git Repo

Example Snippet:

 <quill-editor [(ngModel)]="productDetail"  [style]="{border: '0px'}"></quill-editor>
Imrahamed
  • 192
  • 14
  • Thanks! It works almost perfectly! :) Finally the image is added but without div tags... I found the sanitize option in documentation but how can I use it? I tried this way: `` ... but it throws this error : `ng: Can't bind to 'sanitize' since it isn't a known property of 'quill-editor'. – Zsolt Üveges Nov 28 '18 at 08:38
  • Which version of quil you are using? – Imrahamed Nov 28 '18 at 09:31
  • Sanitization only support in V3.3.0 and After. Reference: https://github.com/KillerCodeMonkey/ngx-quill/issues/198 – Imrahamed Nov 28 '18 at 09:32
  • I have "ngx-quill": "^4.1.0", and "quill": "^1.3.6". I think this is up-to-date. – Zsolt Üveges Nov 28 '18 at 09:42
  • Can you create a stackblitz for this, That will be make this more easy to debug. – Imrahamed Nov 28 '18 at 10:20
  • I don't know, can I install quill on stackblitz? Because without it, you can't run it, so I think it's not a big help. :D – Zsolt Üveges Nov 28 '18 at 11:58
  • I created an example for this in stackblitz https://ngx-quill-wytq8d.stackblitz.io – Imrahamed Nov 28 '18 at 13:38
  • 1
    Wow! Thanks so much your help! I modified your code. You can see if you click the button the image will be added, but without the divs... https://stackblitz.com/edit/ngx-quill-dxmifr – Zsolt Üveges Nov 28 '18 at 14:31
  • I don't get the query now, here what do want me to do now? Can you explain that more clear? – Imrahamed Nov 28 '18 at 15:04
  • I would like to add my divs with css classes under your image if I click the button. But the editor is adding only just img tag without my div container. – Zsolt Üveges Nov 28 '18 at 15:10
  • For that kinda interpolation you need to use [(innerHtml)]. – Imrahamed Nov 29 '18 at 05:56
  • I have modified the stackblitz, But image size will be an issue if you use innerhtml – Imrahamed Nov 29 '18 at 05:57
  • Oh thanks! I have only one problem with this, how can I put the [(innerHtml)] binding to the "textarea" div. Because now the image is replacing the textarea now :D – Zsolt Üveges Nov 29 '18 at 13:32
0

If I understand your problem, you want to add a img tag inside your quill-editor.

Modifying the Element.innerHTML property is a good method if you want to do this but is a bit complicated. It exists simplier method to do that like Element.insertBefore() or Element.append().

You can use them like this :

document.getElementsByClassName('ql-editor')[0].append(imageElement);

Or

document.getElementsByClassName('ql-editor')[0].insertBefore(imageElement, null);

If you really want to use the Element.innerHTML, I invite you to see the documentation about this property.

Hope this helps

Edit: Grammar

Baguette Eater
  • 36
  • 5
  • Thanks your answer, but the problem with this solution is that the html tags added like string, so when I read it from DB it won't be html tags but string in a

    tag. I used [innerHtml] of course.

     – Zsolt Üveges Nov 28 '18 at 08:46