Question

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

 final GlobalKey<ScaffoldState> scaffoldKey =
          GlobalKey<ScaffoldState>();

我在模态下有一个图库，其中充满了我的图像，我想，如果我从模态中选择一个图像，则将img标签放在编辑器中的文本之后。

这是我要添加的一张图片的代码：

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

我的问题是，生成了Quill的contenteditable div（这是我的文本的div，它具有“ ql-editor” css类），因此我无法提供使用@ViewChild的本地引用... （或者我不知道如何）

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

我试图通过示例getElementsByClassname来获取“ ql-editor” div的内容，并向其中添加了img标签，但是角度引发此错误：

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

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

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)

Answer 1

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

示例片段：

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

Answer 2

如果我理解您的问题，则想在img内添加一个quill-editor标记。

如果您想修改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关于此属性的信息。

希望这会有所帮助

编辑：语法

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

2 个答案: