Jump to:

23355 Posts in 17838 Topics by 2862 members

General Questions

SilverStripe Forums » General Questions » Workaround tinymce image align?

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

Page: 1
Go to End
Author Topic: 3992 Views
  • MarijnKampf
    Avatar
    Community Member
    164 Posts

    Workaround tinymce image align? Link to this post

    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.

  • MarijnKampf
    Avatar
    Community Member
    164 Posts

    Re: Workaround tinymce image align? Link to this post

    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.

  • Siv
    Avatar
    Community Member
    6 Posts

    Re: Workaround tinymce image align? Link to this post

    Thank you - it seems to solve our problem

  • Pigmeu
    Avatar
    Community Member
    1 Post

    Re: Workaround tinymce image align? Link to this 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

  • bit99
    Avatar
    Community Member
    24 Posts

    Re: Workaround tinymce image align? Link to this post

    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,

    3992 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.