如何在 Angular 中将 html 标签添加到 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 标签添加到其中，但是角度会引发此错误：

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，我邀请你看看the documentation关于这个属性。

希望对你有帮助

编辑：语法