I am using Ruby on Rails 3.1.0 and I would like to know if it is possible to use CSS classes in mailer templates (.html.erb). At this time, in order to style emails, I am using HTML code like the following:
<div style="margin: 4px 0 12px;">
<span style="font-size: 14px;">
...
</span>
</div>
So, is it possible to use CSS classes in mailer templates? If so, where and how I should state and use those classes?
Code like it's 1995, because email clients (particularly Outlook 2007, Gmail, Hotmail) support a very limited set of HTML elements and CSS attributes. Use tables, inline styles, presentation elements (i.e. <b> instead of font-weight:bold).
Useful links on coding for email:
http://www.sitepoint.com/code-html-email-newsletters/
http://kb.mailchimp.com/article/how-to-code-html-emails
http://www.campaignmonitor.com/css/
Stylesheets have a tendency to be stripped by some mail clients (especially with web mail services) so the use of style attributes is recommended instead.
Yes. ERB allows you to write any HTML you would normally.
However, because it's email and clients are notoriously bad at rendering CSS consistently, you should use inline formatting as you have in your example. (I know that's horrible).
You could insert a <style>.myclass { color: red; }</style> at the top of the mailer template and then use <div class="mclass"> in the template, but chances are that this style tag will be removed by the client.
You're lucky because there's a gem called Roadie that solves this problem elegantly. See the RailsCasts episode Sending HTML Email for more information.
Related
I'm building an application that has a HTML GUI interface to create, move and edit boxes (div) inside a container div. These boxes get assigned inline styles when editing, these inline styles are saved to the database and are output in the views:
<%= sanitize raw(#slide.content) %>
I want to sanitize the HTML itself, to avoid someone hacking in, for instance, a script tag, through sending that by editing what's sent to the server when the boxes are saved.
Rails 4 has a helper method sanitize available through the class ActionView::Helpers::SanitizeHelper. When I use this with a test content value that contains a malicious <script> tag, the script gets removed just fine. But sanitizing the content also strips CSS properties inside the style tag that are necessary for the boxes, like top, left, position, etc.
In the linked documentation, it's stated that sanitize will automatically use the function sanitize_css when it comes across a style attribute:
sanitize_css(style)
Sanitizes a block of CSS code. Used by sanitize when it comes across a style attribute.
I do not want this behaviour of sanitize. How can I disable sanitize using sanitize_css, to sanitize the HTML, but not the CSS?
You can allow any attributes and tags you need, so rails will skip them.
sanitize raw(#slide.content), tags: %w(table tr td ul li), attributes: %w(style href title)
Speaking about CSS rules themselves, it's a bit harder to allow additional rules, but still possible. You can monkey patch the HTML::WhiteListSanitizer class (https://github.com/rails/rails/blob/c71c8a962353642ee44b5cc6ed68dc18322eea72/actionpack/lib/action_view/vendor/html-scanner/html/sanitizer.rb). There are several attributes that can help.
In your config/application.rb file:
config.action_view.sanitized_allowed_tags = nil
config.action_view.sanitized_allowed_attributes = nil
safe lists found here: loofah html5 safelist
I'm developing a lot of RadiantCMS applications, and this CMS uses custom radiant tags which are translated to content and html at runtime. So, my HTML templates have a markup like this:
<body>
<div class="content">
<r:content />
</div>
...
</body>
This is all fine, but Rubymine complains about all the <r:content /> tags being invalid html. The effect is that my html-templates are loaded with error-notifications.
I know that you can customize the Rubymine Inspections, and allow Custom HTML Tags, but there are almost unlimited <r:... /> tags available. To add all possibilities in the customtags field would be hours of work and not very flexible, because new tags come and go by the month.
What I want to do is pass in a wildcard for the r: so that all those tags are allowed as valid html tags. I tried some REGEX options but gave me no results.
Does anyone have experience with Rubymine Inspections and how to overcome this issue?
There is a feature to define inspections per Scope. You can add a new Scope for all your project files except these template files (they can be excluded either by directory or name pattern). Then in the Inspection settings you can add this scope and configure the inspection reporting invalid HTML tags to trigger only in the custom scope, not for all the files. As your templates with <r:... /> are excluded from this scope, inspection will not report such files.
It's not ideal, as it will not report other possibly invalid tags in the template files, but right now there is no way to ignore tags by pattern, but you can submit a feature request.
Anyone who's done anything much with PHP and receiving rich-text input from something like TinyMCE has (probably) used something like HTMLPurifier to keep the nasties out of the HTML you're intentionally allowing the user to submit.
For example, HTMLPurifier will take a string of (potentially malformed) HTML and strip out disallowed elements and attributes, try to fix broken HTML, and in some cases convert things like <i> to <em>.
Does anything equivalent exist for Rails (3)? What's the generally accepted way to sanitize input from rich text editors in Rails so that you can output the unescaped HTML onto a web page and know that stuff like <style> and <script> tags have been taken out of it and it's not going to break your page (or steal your cookies!)?
EDIT | Anybody used Sanitize? Any other options with pro's & con's?
You can use the sanitize method.
sanitize(html)
There is also a Sanitize gem.
Sanitize.clean(html)
I tend to prefer the Sanitize gem because it can be used as a before_save filter in your models instead of having to use the sanitize method in each of your views.
I am using MVC.NET and CKEditor and want to prefill the textarea so on edit forms the text is already loaded.
I try with:
<%= Html.TextBox("Message", Model.Message) %>
I can see that the textarea contains the correct text, but since CKEditor alters the html, it isn't inserted into the editor. Is there a way to hack it so I can insert the text into the form?
It was a stupid error, a simple:<%= Html.TextAreaFor(model => model.Message) %> made it work.
CKEditor is desined for WebForms and its designed in such a way to depend on the external dependencies like request and response.
Unless the CKEditor company provides the helper extension for MVC you will not be able to do that. You can also search if there is any extension points provided like interfaces.
I have been working on a Rails template recently called BaseApp2. You can see it on GitHub here: http://github.com/dannyweb/BaseApp2
There is an administrators section setup which allows the management of Users and I am working on the ability to add announcements to the public site via the admin section.
What I would really like to do, is come up with two or three alternative colour schemes for the interface and allow the administrator to choose which they prefer and select it. The chosen colour scheme would then show for all users from then on.
I have literally no idea how to go about doing this - ideally I am looking for a tutorial of some sort or something equally beginner-esque.
Thanks in advance!
Thanks,
Danny
It should be fairly easy and there are many ways to do it. You will need to save that preference somewhere. Maybe add an attribute to your user/person model that will specify that preference. And in your admin layout template, based on that preference, add an additional stylesheet. Or, add a class to the body tag and in your style sheet subclass the styles:
body {
background-color: white;
}
body.sunshine {
background-color: yellow;
}
The layout template:
<%= stylesheet_link_tag(current_user.theme) if current_user.theme %>
or
<body class="<%= current_user.theme || '' %>">