placing an Image between paragraphs dynamically using javascript and php

Question

I want to build a content management system but I am not able to find logic how to insert and retrieve contents with some Image insert the paragraphs. I have found some libraries that gives textarea extra functionality like adding Images between paragraphs but I don't know how I should save them in the database and retrieve contents with images between paragraphs.

That being said, I know how to save images and words but separately. Someone with an ideas how this is done can help to understand it.

Answer 1

This concept may address one aspect of what you're trying to achieve:

You can convert any image to base64 and embed it right into your html. You can also embed inline css into your html using the style attribute and float that image to the left or right side of a paragraph. Here's an example:

 <img style="float:right;" src="data:image/jpeg;base64,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"> <p>This paragraph is wrapping around an image (shown right) that is embedded into the html via base64. You can convert any image to base64 online. <p>This could all be save into a database, and when rendered by a web browser, it would look about like how you see it here.</p> <p>Good Luck!</p>

Link: Convert image to base64 online