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.

General Questions

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

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

Workaround tinymce image align?


Reply

5 Posts   4204 Views

Avatar
MarijnKampf

29 April 2010 at 2:23am Community Member, 164 Posts

I opened a bug ticket yesterday [url=http://open.silverstripe.org/ticket/5492]image changes made to the alignment through TinyMCE's 'Inert/edit image' aren't reflected in the published code[/url], but was wondering whether anyone knows a workaround for the issue in the mean time.

Avatar
MarijnKampf

11 May 2010 at 9:51pm Community Member, 164 Posts

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

13 July 2010 at 9:29pm Community Member, 6 Posts

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

Avatar
Pigmeu

15 July 2010 at 5:08am Community Member, 1 Post

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

11 June 2012 at 4:24pm Community Member, 24 Posts

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,