javascript - 如何将 html 标签添加到 Angular 中 Quill 文本编辑器的内容 div？

Question

我有一个带有羽毛笔文本编辑器的表单。

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