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

Workaround tinymce image align?


Go to End


5 Posts   7026 Views

Avatar
MarijnKampf

Community Member, 176 Posts

29 April 2010 at 2:23am

I opened a bug ticket yesterday image changes made to the alignment through TinyMCE's 'Inert/edit image' aren't reflected in the published code, but was wondering whether anyone knows a workaround for the issue in the mean time.

Avatar
MarijnKampf

Community Member, 176 Posts

11 May 2010 at 9:51pm

Found a work around myself. The popup menu still doesn't work, but I've added the following css to themes\yourtheme\css\typography.css:

.typography .left {
	float: left;
	padding: 1em 1em 1em 0;
}

.typography .right {
	float: right;
	padding: 1em 0 1em 1em;
}

.typography .center {
	display : block;
	margin: 0 auto 0 auto;
	text-align: center;
}

.typography .leftAlone {
	float: left;
	margin-right: 100%;
}

.typography .rightAlone {
	float: right;
	margin-left: 100%;
}

And added them to the Styles menu of tinymce by adding the below to mycode\_config.php

HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 'None=none;Image left=left;Image center=center;Image right=right;Image left alone=leftAlone;Image right alone=rightAlone');

Users can now simply select the alignment of the image in the styles menu. I added the none listing so they can disable a style if they accidentally add it to text rather than an image (as I could find no way to remove a style without going into HTML code).

I had to manually hard refresh (Shift + Refresh) the css file http://yoursite.com/themes/yourtheme/css/typography.css to get my browser (Firefox) to recognise that the css file had changed.

Avatar
Siv

Community Member, 6 Posts

13 July 2010 at 9:29pm

Thank you - it seems to solve our problem :-)

Avatar
Pigmeu

Community Member, 1 Post

15 July 2010 at 5:08am

At /cms/_config.php, change the line, for tinymce settings, where it says:

'extended_valid_elements' => 'img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|usemap]...

to:

'extended_valid_elements' => 'img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|usemap|style]...

Adding the style attribute to img tags makes the "Insert / Edit Image" stuff to work again.

Regards,

Pigmeu

Avatar
bit99

Community Member, 24 Posts

11 June 2012 at 4:24pm

great post = > MarijnKampf

I will add:

HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 'None=none;Image left=left;Image center=center;Image right=right;Image left alone=leftAlone;Image right alone=rightAlone');

to mycode\_config.php on all my sites from now on.

thanks,