Search code examples
htmlangulartypescriptwysiwyg

How to render an image in content-editable field?

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

  • You need to render it as innerHTML instead of string?

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

    not

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