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

Question

我有一个带有 quill 文本编辑器的表单。

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

我在模态中有一个图片库，里面装满了我的图片，我希望，如果我 select 来自模态的图片将 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 class）是生成的，所以我无法提供使用@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

如果我理解你的问题，你想在 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看看这个属性。

希望对您有所帮助

编辑：语法

Answer 2

你可以使用 ngModel，它在文档中有明确提及。参考： ngx-quill git Repo

示例代码段：

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

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

How can I add html tag to the content div of Quill text editor in Angular?

html

javascript

quill

angular

ngx-quill