How to dynamically wrap text around a image in a content editable div?

Question

I want to add image in a div through a button click and then make the contenteditable div adjusted according to the position of the image and wrap text around the image. I wish to create something as in these images:

• image on the left side of the text
• image in the middle of the text
• image on the right side of the text

This can be solved by using the float property in CSS, but that too is not dynamic, as if I move image anywhere it is floated to right or left, wherever it is defined in CSS, as it is specified in the JSFiddle and code.

 function upload() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; var image1 = newImage.outerHTML; var n; n = document.getElementById("test"); n.innerHTML += image1; }; fileReader.readAsDataURL(fileToLoad); } } 

 <input type="file" onchange="upload()" id="inputFileToLoad"> <div contenteditable="true" id="test" style="height=500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> 

If I upload an image then instead of wrapping the text around the image, it is only present in the last line.

Does anyone have a clue how to solve this problem?

Answer 1

You can fake float: center the image, see the example

https://css-tricks.com/float-center/

You'll need to wrapp the image with a tag, maybe a div than set a before and an after