3

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

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

我只使用一个字符串 btw ...

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

2 回答 2

3

您可以使用 ngModel，文档中明确提到了它。参考： ngx-quill git Repo

示例片段：

 <quill-editor [(ngModel)]="productDetail"  [style]="{border: '0px'}"></quill-editor>
于 2018-11-27T14:42:24.870 回答
0

如果我了解您的问题，您想img在quill-editor.

如果您想这样做，修改Element.innerHTML属性是一个好方法，但有点复杂。它存在更简单的方法来做到这一点，例如Element.insertBefore()or Element.append()。

你可以像这样使用它们：

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

或者

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

如果您真的想使用Element.innerHTML，我邀请您查看有关此属性的文档。

希望这可以帮助

编辑：语法

于 2018-11-27T14:22:08.427 回答