tinymce skin css not precompiled

[jamesy829]

I am currently hosting an application on Heroku and it does sluggish compilation. I have setup CDN with CloudFront to ensure loading of assets faster.

However, when it loads up the toolbar on Heroku, all the icons are showing as square boxes.

After looking at the developer tools for networks, I noticed that assets/tinymce/skins/lightgray/skin.min.css and assets/tinymce/skins/lightgray/content.min.css are not compiled as part of the application.css.

Any suggestion on how to get the toolbar to show proper icons?

[seantaylor]

Im having the same issue, also on cloudfront.

[seantaylor]

Looking into this further this appears to be a CORS issue (http://www.holovaty.com/writing/cors-ie-cloudfront/). So not specific to tinymce-rails and not a bug for the gem.

[spohlenz]

@seantaylor Did the solution in your link work for you? If so, I might add a note to the README.

[seantaylor]

I don't host my assets on S3 and then through cloudfront, the assets are served through my nginx, so I was able to add a cross site policy on my server. For example if you're running nginx:

location ~* \.(eot|ttf|woff|ico)$ {
    gzip_static on;
    expires     max;
    add_header  Cache-Control public;
    add_header  Access-Control-Allow-Origin *;
  }

Or if you were on apache:

<FilesMatch "\.(eot|ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

If you're running cloudfront out of S3, you would need to do as the link I posted earlier suggests and edit the CORS configuration on S3.

W3.org has a good explanation of why here: http://www.w3.org/TR/css3-fonts/#same-origin-restriction

[Undistraction]

Take a look at: https://github.com/ericallam/font_assets

Also add a CORS Configuration to your bucket (this is a policy working with Tiny MCE in production):

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

[fwl]

I am having the same problem with Rails 4.2.x, tinymce-rails 4.1.6, on Heroku, using Cloudfront. @jamesy829 did you manage to fix the issue? If yes, how?

Thank you.

[benoitwerner]

me too! @fwl, any progress?

[fwl]

@benoitwerner we dropped tinymce-rails because we couldn't resolve this. Will try again sometime in the near future... Sorry I can't be of much help.

[hopewise]

Can't we hardcore the full path of the font? If I can set the full path to point for my S3 bucket that allows cross origin header, then it will solve my problem. like for skins/lightgray/fonts/tinymce.woff is that possible? I could only set the fullpath for content_css only

[maxivak]

having the same issue. I had to have tinymce package (downloaded from the official site) in public directory public/tinymce/ so it is not precompiled and served as-is.

[Faq]

Migrating to v5.0.4+ resolves this, as there are different templates used and those are working fine.