How to render an image in content-editable field?

Question

I am trying to create a Rich Text Editor with contenteditable div, using Angular and TypeScript.

I have managed to save image into database(pouchDB) in Base-64-encoded string.

like this in plain text:

 <img src="data:image/png;base64,iVBORw0KGgoUlEQVR4Ae2diXdV1RWH+Q9bba1TLa11WO3SLhRBpIBo=">

But when i read it from database and try to render on page as image, it is also displaying as above plain text.

• When i read the img data from DB, is there any convenient way to transfer it into HTML object?
• And the img tag data could be mixed with other Text content, what is the general principal to separate them from each other?

Answer 1

You need to render it as innerHTML instead of string?

<div [innerHTML]="content"></div>

not

<div>{{ content }}</div>