tinymce

tinymce copied to clipboard

Hello, Here's my sample code on https://fiddle.tiny.cloud/

<style>
img{max-width:100%;}
</style>
<script type="text/javascript">
  tinymce.init({
    selector: "textarea",
    plugins: ["image"],
    toolbar: "image",
  });
</script>
<form method="post" action="dump.php"><textarea name="content"></textarea></form>

Paste the following url into "Source" in "Image" button: (Test image from Bing background) https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wyTq

The image origin size 1920x1080, but the width/height on "Image" window is not the same. When you zoom out browser size, paste URL again, the width/height will be smaller. Screenshot: https://images2.imgbox.com/57/0d/cLi7YH9z_o.png

Whatever the browser size is, the width/height keep the same as image origin size. However, when outer css style img{max-width:100%;} added, width/height become the browser size. The way to fix the issue I found is to remove global css style img{max-width:100%;} or cover it with other css.

There're lots of front-end packages like Bootstrap have default css img{max-width:100%;}. It's better to find a way making TinyMCE be independent of the editing page css styles.

After code review, I found a solution can fix the issue: https://github.com/tinymce/tinymce/blob/develop/modules/tinymce/src/plugins/image/main/ts/core/Utils.ts Add after Line 48: style.width = style.height = 'auto'; style.maxWidth = 'none';

This can fix outside CSS which influenced image size. Otherwise, Eg. outer CSS set max-width="100%", the inserted image width will be detected as screen width. Under small screen, the auto detected width will be screen width, smaller than actual width of image. The inserted image width/height should always be the image actual width/height.

Thank you!

This issue is stale because it has been open 365 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 30 days.

This issue was closed because it has been stalled for 30 days with no activity.