tinymce, image resize, use css instead of <img width & height>

6
votes

I use this wonderful tool, tinyMCE, for editing pages at my website. But i have a problem with the resizing of images.

Is it possible to change the way tinyMCE changes the size of the image? Now the software changes the width and height inside the ..

<img src="..." width="..." height="..." />

But this setting gets overridden by the CSS. (I have some general img settings in the CSS, width, height:auto, and centering on page.)

If the users define a size for the image, i want this new size to override the general css. But with the img parameter width & height. this is notpossible. CSS override their value.

So.

I want tinyMCE to change the size of the image by CSS. Is this possible?

ex:

<img src="..." style="width:...;height...;" />

(The size is set by draging the corner of an image to the size you want.. and not edited in html html code.)

Thanks for reading. Matte

4
htmlcsstinymce

4 Answers

1
votes

It doesn't appear to be currently possible to easily change the way TinyMCE adds width and height tags to the img element. There is a feature request open to add this functionality Stop Prepopulating Image Dimensions.

8
votes

I bypassed this by adding a plugin in the project that handles the re-size event.

Just going to post it here in case someone ever needs it.

tinymce.PluginManager.add('imageresizing', function(editor, url) {

editor.on('ObjectResizeStart', function(e) {
    if (e.target.nodeName == 'IMG') {

        var selectedImage = tinymce.activeEditor.selection.getNode();
        tinymce.activeEditor.dom.setStyle(selectedImage,'width', e.width);
        tinymce.activeEditor.dom.setStyle(selectedImage,'height', e.height);

        selectedImage.removeAttribute('width');
        selectedImage.removeAttribute('height');
    }
});

});

Of course you need to add the plugin to tinyMCE which is beyond the scope of this question, but it's not hard at all.

0
votes

$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("height", "150"); $("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("width", "200");

Here "#ctl00_ContentPlaceHolder_RichTextBox_ifr" is id of textarea..

With this you can resize the image .. .. ..Sarath@f1

0
votes

To solve the problem of getting the default image insert size to fit the container, i used

content_style: 'img {max-width: 100%;}'

Inside the tinymce.init({