Rich text

Rich text areas provide an interface for a small subset of HTML and CSS.

Rich text can be applied to any block element (div).

Currently supported features are:

• headings (h1-h6)
• font colour (color)
• bold (strong)
• italic (em)
• underline (u)
• text alignment (text-align)
• links (a)
• clear formatting.

Rich text editable regions require support from the template author to work as expected.

The purpose of this element is to provide styling for the rich text area. When it creates new elements, it will use these styles for them. The styles are automatically inlined.

Each rich text editable block should contain a comment tag, immediately followed by a div tag, immediately followed by a comment tag (see below).

There should be no text nodes between the opening editable tag and the comment.

The style div may contain spaces.

It is probably best practice to add style="display: none" to the style div. If this is not correct, an error message displays when the user clicks to edit the block, e.g. "No rich text style element found."

This style element should contain an example of each of the following tags:

• h1
• h2
• h3
• h4
• h5
• h6
• a
• strong
• em
• u
• p
• s
• span
• ul
• ol

<div om:editable="rich-text" om:id="1"><!-- ometria_remove_begin --><div style="display: none">
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <h6></h6>
        <a></a>
        <strong></strong>
        <em></em>
        <u></u>
        <p></p>
        <s></s>
        <span></span>
        <ul><li></li></ul>
        <ol><li></li></ol>
    </div><!-- ometria_remove_end -->
</div>

<div om:editable="rich-text" om:id="1"><!-- ometria_remove_begin --><div style="display: none">
        <strong style="color: darkgreen;"></strong>
        <h1 style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; line-height: 1.3; margin: 0 0 10px; padding: 0; text-align: center"></h1><span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
        <p style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.3; margin: 0 0 10px; padding: 0; text-align: center; width: 100%"></p>
        <a style="color: #2199e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"></a>
    </div><!-- ometria_remove_end -->
</div>

Limitations of rich text

The CSS inlined in these elements will be parsed by the user's browser. Hacks like Margin: 0 will be removed.

If the editable region does not have (either directly or via inheritance) CSS like text-align: left then there will be a "jump" in text when the user attempts to edit.

text-align on tags (h1, p) should work as expected.

If the template uses a custom font for body text, the rich text editor will not load this. It will display correctly in the preview.

Extra colours in colour picker

The colour picker supports a number of colours by default.

For more flexibility and to support brand colours, add a styles property to the attribute om:extra-styles.

<div om:editable="rich-text" om:id="1" om:extra-styles='{"colours": ["red", "#ee8d76"]}'></div>

Custom fonts

The om:extra-styles attribute also accepts information on custom fonts.

This displays the font menu in the rich text editor.

<div om:editable="rich-text" om:id="1" om:extra-styles='{"fonts": [{"family": "Hasklig"}]}'></div>

This is supported in three formats. The chosen format does not affect the email, only the display in the rich text editor.

The first does not load the font from any link and relies on the user having the installed font to display in the rich text editor.

{"fonts": [{"family": "Hasklig"}]}

The next format is suitable for including a CSS file. This is popular with Google fonts.

{ "fonts": [{"family": "Indie Flower","import": "https://fonts.googleapis.com/css?family=Indie+Flower"}]}

The final format allows linking directly to font files.

For more control, "fontFace" should be provided. This can contain any CSS that is valid in an @font-face rule.

{"fonts": [{
    "family": "My Font",
    "eot": "https://example.com/font.eot",
    "woff2": "https://example.com/font.woff2",
    "woff": "https://example.com/font.woff",
    "ttf": "https://example.com/font.ttf",
    "fontFace": {
      "fontWeight": "bold",
      "fontStyle": "normal" }  }]}