I am trying to find a way for better UI/UX in regards to Rich Text Editor’s (RTE). Let me explain! (And there is a question at the bottom of the post)
If a user has a large body of text (eg forum post or a blog) rather than using a MultiLine Input, a RTE we know offers more customisation possiblities. Even the addition of images and files.
So what I am thinking is that we can break up the text monotony by adding an image or something similar.
However, Images in the (for example) bubble Ritch Text Editor are not responsive and apparently there’s no way around this by using a no-code solution such as the elements editor. So we must put an HTML Element on the page and then in that element you can post this CSS file
{Img Width:100%; Height:auto; }What this code does is limit the image to be the width of the available space that you set the parent element to. So if you make your element mobile responsive, whatever size that parent element is, the image will fit that. And then the auto for the height is just set automatically…
After all that here comes my question,
I don’t really know code so there might be a way to play around with this code to make it so that the image can be limited to one side of the page and so the text can wrap around it… I am not sure, but if anyone that has more coding experience wants to add anything to this as to how that might be possible, it would be much appreciated I’m sure.
How can I adjust the css code to be able to have the image display as above for mobile views, then on fullscreen size/ desktop have the image/ images be displayed on a particular side of the text? And the image element would be collapsed if the user decides not to add an image
Eg We could have a few paragraphs of text and insert an image, that image would be on the right and take up 50% of the real-estate and the text would then reduce to the other 50% and “wrap around” the image before expanding back to take the full 100%. If another image were to be added we could do the same thing with the image on the left for example.
(I posted a more simplified version of this post on my LinkedIn but thought it could benefit being here as well. 
)
Looking forward to your responses thanks in advance