Guides
Tutorials
Pop Tags

Rich Text Area

All contents have a body field defined as a Rich Text Area by default. But you can easily remove it or add additional Rich Text Area fields.

The rich text editor in Webpop comes with a reasonable set of defaults and can be used without any configuration. If you have particular needs for a project or want to inject some tailor-made CSS into the preview area of the rich text editor, you can add a richtext.css file to your design files (it doesn’t matter where you add it, but you should only add one).

Whenever the rich text editor is shown, the richtext.css stylesheet will be included and the editor will be configured based on the CSS selectors.

If the stylesheet is empty you’ll get a very minimalist editor.

Minimal rich text editor

Here’s an example stylesheet that matches the default configuration of the editor:

h2, h3, h4, pre, strong, em, ol, ul, a, img {}

That’s it - simply setting up an empty declaration for these elements will make the editor include them.

Default elements

To add a h5 and h6, again just mention them in the stylesheet:

h5, h6 {}

You can also add new custom classes in this way, both for block elements and inline elements. For instance, take the following simple color classes:

.red {}
.blue {}

Placing these into the richtext.css will create two new values in the Rich Text Editor's dropdown menu for applying styles.

Custom classes

You would then appoint rules to those classes in your own stylesheet(s) like the following:

.red { color: red; }
.blue { color: blue; }

Another option is adding a block element with a class. Imagine you want a “Lead Paragraph” element with a larger font-size:

p.lead_paragraph { font-size:22px; }

Now in the Rich Text Editor in the 'format dropdown' you’ll get a “Lead Paragraph” option.

Custom block elements

Note: To clarify, selector properties placed inside the richtext.css won't be applied to the final code. So make sure to keep them in another stylesheet.

You can also specify classes for images and other elements. Here’s the typical option for floating images left or right:

img.align_left { float: left; }
img
.align_right { float: right; }

These items will not show up in the 'style dropdown' when normal text is selected, but if you insert an image and select it, you’ll then get both the “Align Left” and “Align Right” options in the dropdown. In this case we've included the float properties so the effect of applying the style is evident in the editor.

Image alignment options

But remember, any CSS properties defined in richtext.css must also be defined in stylesheets of the actual website to make sure the classes and elements look the way they ought to. Webpop never includes any CSS or JavaScript in your website unless you explicitly tell it to.

When using rich text fields in templates, the text will not be HTML escaped. If you need it to be (like if you’re passing it to a JavaScript string or something similar) you can set the escape attribute to true.

The truncate attribute works in the same way for rich text fields as for normal text fields, and it is HTML aware, so it won’t cut your text in the middle of a tag.

Continue to Dropdown Fields »