如何在 Angular 中將 html 標簽添加到 Quill 文本編輯器的內容 div？

Question

我有一個帶有 quill 文本編輯器的表單。

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

我在模態中有一個圖像庫，里面裝滿了我的圖像，我希望這樣，如果我從模態中選擇圖像，請將 img 標簽放在編輯器中的文本之后。

這是我要添加的一張圖像的代碼：

<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>

我的問題是 Quill 的 contenteditable div（這是我的文本的 div，它具有“ql-editor”css 類），因此我無法提供使用 @ViewChild 的本地參考...（或者我不知道怎么樣）

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

我試圖通過示例 getElementsByClassname 獲取“ql-editor”div 的內容，然后將我的 img 標記添加到其中，但 angular 會引發此錯誤：

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)

順便說一句，我只使用一個字符串...

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

Answer 1

您可以使用 ngModel，它在文檔中明確提及。 參考： ngx-quill git Repo

示例片段：

 <quill-editor [(ngModel)]="productDetail"  [style]="{border: '0px'}"></quill-editor>

Answer 2

如果我理解你的問題，你想在你的quill-editor添加一個img標簽。

如果你想這樣做，修改Element.innerHTML屬性是一個很好的方法，但有點復雜。 它存在更簡單的方法來做到這一點，如Element.insertBefore()或Element.append() 。

您可以像這樣使用它們：

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

或者

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

如果您真的想使用Element.innerHTML ，我邀請您查看有關此屬性的文檔。

希望這可以幫助

編輯：語法