Over the past couple of weeks I’ve been working on a local, tech job board for the Triangle (which encompasses Raleigh, Durham, RTP and everywhere in between). As part of the forms to create a new job posting, I’ve implemented using Basecamp’s excellent rich text editor, Trix.
The great thing about Trix is that it returns a string of HTML. By default, Ember (or more specific handlebars) HTML escapes properties. Which means if you had a property greetString
set to a string like <div>Hello <strong>world!</strong></div>
, when you reference the property in a template, it’ll render the raw string and now the HTML.
{{greetString}}
// Renders
<div>Hello <strong>world!</strong></div>
To have handlebars render unescaped HTML, you’ll want to wrap your property around three pairs of curly brackets instead of the regular two. So this {{{greetString}}}
renders ‘Hello world!’. This is great because I don’t have to do any additional styling since having users use the Trix editor provides the styling for me .