Angular 7 - добавить тег изображения с атрибутами к редактируемому div на курсоре

Question

Я так новичок ie в Angular 7 и хочу в основном вставить изображение (или другие изображения) с событием (щелчком) в редактируемый div. В основном хочу имитировать редактор WYSIWYG и поместить его там, где находится курсор.

Может кто-нибудь помочь мне разобраться, как это сделать в Angular 7.

Не понял, как Точно поиграть с DOM в Angular 7 пока нет.

Любые указатели очень ценятся!

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

Так что после того, как я нажму, произнесите кнопку Image 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>

Answer 1

Вы можете использовать команду insertHTML следующим образом

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

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

Рабочая демонстрация