Hi,

can someone please explain howto insert an image with TinyMCE without getting a div block surrounding the image tag?

<div class="image leftAlone" style="width: 282px;">
<img height="120" width="282" src="assets/Uploads/Open03.jpg" alt=""/>
</div>

Unfortunately the option "alignment / style" doesn`t include a "just image" style.

I tried to make my own style but i was not able to find the correct TinyMCE configuration to make my own. Where can I add my own styles to have a clean image integration without any other elements?

Thanks much!

patte

you will need to edit jsparty/tiny_mce_improvements.js

between line 528 and 547.

do you use SS 2.3 oder an SS 2.3 RC version?
i already posted this problem: http://open.silverstripe.com/ticket/3460

you could go into the HTML editor of the CMS and remove the DIV tag arround the IMG.. then the alignment works again.

they made this div tag to have the option to add a caption to the picture i think.
you can read the TicketLog.. they are discussing about this problem :D

SalvaStripe

This was the first thing I noticed when trying out SilverStripe and it nearly drove me nuts, not being able to center an image... I can edit the HTML easily but no editor I know could. I modified the code in the place pinkdigital mentioned so that the div is only inserted if a caption is actually written. If there's no caption just the img tag gets inserted. Here it is:

/**
* Insert an image with the given attributes
*/
ssInsertImage: function(ed, attributes, cssClass, withCaption) {
el = ed.selection.getNode();

var imageContainerClass = withCaption ? 'captionImage' : 'image';

var imgOnly = '<img id="__mce_tmp" />';

var imgDivv = '<div style="width: ' + attributes.width + '" class="' + imageContainerClass + ' ' + cssClass + '"><img id="__mce_tmp" />';

var captDiv = '<div style="width: ' + attributes.width + '" class="caption">' + attributes.title + '</div>';

if(withCaption && attributes.title != "") {
html = imgDivv + captDiv;
html += "</div>";
}
else{
html = imgOnly;
}

It is still not perfect as a captioned image can still not be positioned away fron left-aligned but it's a start. One would probably only have to to add a surrounding div that's set to 100%. I'll give it a try later and see if that works.

Regards.

hey guys,

everytime I edit the html code i get a <p> tag surrounding the img tag. If i delete the <p> and save the tinymce text it is still there.... strange. For me this is a problem because i want to give every paragraph padding and now those images also get it. Any idea?

@silvernick - thanks for your code snippet... I couldn`t get it work .. perhaps you can be more specific where to replace the lines...or post the complete tiny_mce_improvements.js ? thanks much in advance!

Wouldn`t it be a perfect solution in general to add an Alignment / style "image only" within the TinyMCE Image window?

patte

Hi!

Did you get it working that you could insert an image without the surrounding paragraph-tag?
I have the same problem as well and could not find it in the tiny_mce_improvements.js.

Toni

I know this is an old topic, but I'd like content editors to be able to insert an image without having a paragraph tag wrapping it. This is more for cleanliness of markup more than anything else.

Any ideas?

I don't get the problem why a image should not get wrapped in a paragraph...
If you need to insert an image which is non-floating then you need proper padding/margin to not mess with typography and text layout. The paragraph tag will do this for you since every text block is/should be wrapped in a paragraph.
On the other hand if you need an floating image then you should insert the image directly in the paragraph where the image can float around the text.

However, you can disable the automatic paragraph via HTMLEditorConfig but this is simply nonsense and imho bad style of coding.