Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

TinyMCE - howto image without surrounding div

Go to End

11 Posts   8402 Views


Community Member, 63 Posts

2 March 2009 at 4:16am


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=""/>

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!



Community Member, 7 Posts

3 March 2009 at 11:25pm

you will need to edit jsparty/tiny_mce_improvements.js

between line 528 and 547.


Community Member, 89 Posts

3 March 2009 at 11:39pm

do you use SS 2.3 oder an SS 2.3 RC version?
i already posted this problem:

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



Community Member, 4 Posts

10 April 2009 at 2:48am

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>";
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.



Community Member, 63 Posts

29 April 2009 at 2:04am

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?



Community Member, 15 Posts

21 October 2009 at 10:52pm


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.


Bright Eyes David

Community Member, 26 Posts

10 December 2010 at 1:59am

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?


Community Member, 344 Posts

10 December 2010 at 11:26pm

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.

Go to Top