Angular 角度7-将带有属性的图像标记添加到光标处的可编辑div

我是Angular 7的新手，基本上想在可编辑的div中插入带有（单击）事件的图像（或不同的图像）。基本上想模仿所见即所得编辑器并将其放置在光标插入符号所在的位置

有人能帮我弄清楚如何在Angular 7中做到这一点吗

还没有弄清楚如何在Angular 7中使用DOM

非常感谢任何指点

<div contenteditable="true" id="editor">Please type something in here
</div>
<button (click)="insertImage1()">Image 1</button>
<button (click)="insertImage2()">Image 2</button>

请在这里键入内容
图1
图2

因此，当我点击“图像1”按钮并在单词“type”后面插入光标后，它会变成这样

<div contenteditable="true" id="editor">Please type <img src="someimage.gif">something in here
</div>
<button (click)="insertImage1()">Image 1</button>
<button (click)="insertImage2()">Image 2</button>

请在这里键入内容
图1
图2

您可以像这样使用

insertHTML

命令

const img = '<img src="someimage.gif">';

document.execCommand('insertHTML', false, img);

const img=''；
document.execCommand（'insertHTML'，false，img）；

---

共享您的ts代码在ts中没有添加任何内容。我一直在查找可编辑分区的光标位置。我正在查找光标位置，然后在那里插入图像。你知道我怎么做吗？