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   4318 Views

Avatar
MarijnKampf

Community Member, 164 Posts

29 April 2010 at 2:23am

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

Community Member, 164 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,