GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.95k stars 395 forks source link

Uploaded Image Position #405

Closed itprogrammer2 closed 7 years ago

itprogrammer2 commented 7 years ago

Hi, first of all thanks for this wonderful library. You're all the best ^_^.

I need a little help with the uploaded image please. The position of the image while in edit mode is like this:

Figure 1 |||||||||||||||||||||||||| |||||||||||||||||||||||||| Some text describing |||||||||||||||||||||||||| the image. Sometimes |||||||||||||||||||||||||| can go as far as the bottom of the image.

But after saving the whole content it looks like this:

Figure 2

Some text describing the image. Sometimes can go as far as the bottom of the image.

Now, if I go back to edit mode, the content goes back to figure 1. Save or Revert goes back to figure 2. What seems to be the problem? Am I doing something wrong? There are no problems whatsoever with the image upload or saving the content. I am also passing the original size of the uploaded image.

Thanks for the help.

itprogrammer2 commented 7 years ago

Hi again, I'm really sorry but I think a found a solution/hack. I inspected http://getcontenttools.com/demo and found this in data-editable-demo section class="[ page__content ] [ formatted ]" and copied this:

.formatted img.align-right, .formatted iframe.align-right, .formatted video.align-right, .formatted .ce-element--type-image.align-right, .formatted .ce-element--type-video.align-right, .formatted [data-ce-tag=img].align-right { clear: initial; float: right; margin-left: 20px; margin-top: 12px; }

.formatted img.align-left, .formatted iframe.align-left, .formatted video.align-left, .formatted .ce-element--type-image.align-left, .formatted .ce-element--type-video.align-left, .formatted [data-ce-tag=img].align-left { clear: initial; float: left; margin-right: 20px; margin-top: 12px; }

I have another question, Am I allowed to copy your CSS? Thank you so much.