Rich text editor
Contents
What is a Rich text editor?
A Rich text editor (RTE) is a form input that allows users to add or edit content in a "what-you-see-is-what-you-get" (WYSIWYG) editing area. Examples of other RTE's are things that you would find on blogging sites and various forums.
When, and why?
RTEs are really useful when you want to provide users with a way of adding or editing content, images, links, and other components, without having to know any code. They also allow content to be styled and formatted using bold, italics, headings, etc. The aim is to reduce the effort for users to enter formatted content directly into forms, as valid HTML.
Once the user has submitted content into the RTE, HTML will be automatically generated for the user and displayed appropriately.
Rich text editor types
The following types of Rich text editor are available:
| Type | Description |
|---|---|
| As default | A Rich text editor that allows content to be formatted and customised using a series of options. |
Rich text editor properties
The following Rich text editor properties are available:
| Property | Description |
|---|---|
| State | Sets the state of a Rich text editor; Default, Active, Focussed, Disabled, Read-only, Valid, and Invalid. |
| Label | Shows/hides the input label |
| Mandatory | Shows/hides the mandatory input markers |
| Help | Shows/hides the help text |
Using a Rich text editor
Sizing
Similar to Textareas, RTEs are taller than regular text inputs and wrap text onto new lines automatically as a user types. They have a fixed height and scroll vertically when text exceeds the bottom of the given area. However, they can also be manually resized to create a bigger space for content, if a user needs it.
The starting size of an RTE should indicate the amount of content that is expected.
Word processing
RTEs work in a similar way to a simple word processor, in that they contain many of the formatting options associated with them, they accept carriage returns, and content can be structured using bullets, etc. A big benefit of RTEs is that images or other media files can be uploaded directly into the editing area. It is also possible to create links to other destinations.
When using an RTE, it is important to consider how the information entered will be stored. Can it store all the uploads, formatting, etc, for later editing or viewing in a different place within the application? Make sure that your application has a method of storing and presenting any content that a user could produce using the RTE.
Validation
As with all form inputs, a RTEs can be checked when a form is submitted to make sure its content is valid or, if it is flagged as a mandatory field, that it is completed before continuing. For more information, please refer to Form Validation.
Contents
Uh-oh! Looks like we haven't finished building this page yet.
Come back soon, and we'll have more exciting content to share.
Contents
Component accessibility
This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.
Aria tags
Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.
Ensure that Aria tags are used as appropriate signposts throughout the product.
Colour Combinations
When designing with a Rich text editor, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Rich text editor and the background it is on. To check the contrast, please use WebAIM's contrast checker.
Focus state
A Rich text editor needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the elements within the Rich text editor.
Icons
An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.
Key Binding
A Rich text editor needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML ones. If this isn't the case then please implement logical key-binds for all intractable components.
Movement/Animation
Please refer to the WCAG guidelines for the time-based considerations for animations.
| Design | Documentation | HTML/CSS | Web Component |
|---|---|---|---|