Rich Text editor

#Overview

This content editor tool comes out-of-the-box for all Hygraph projects, and provides great flexibility when it comes to creating, editing, and manipulating content entries showcasing text and images.

If your project schema is configured so that your model has a Rich Text field, you'll see it like this in the content editor:

Rich Text editor

This dropdown allows you to format text you've highlighted in the text area. You can format it as normal text as well as different heading levels.
These typography options allow you to make text bold, italic, or underlined.
Use this option to add a link. Click here for more information.
Use this option to format the text as a block quote.
Use this option to format the text as inline code.
This option allows you to include an asset. Click here for more information.
Use these options to create either a bulleted or numbered list.
Use this option to format the text as a code block.
Click on the Iframe button to display a popup where you can enter an iframe URL. After you've entered a valid iframe URL, click on the OK button to add it to your content.
Use this option to assign classes to your text. Simply highlight the text and click on the Class button. A popup will display for you to type in the Class name, then click on Ok to finalize the process.
Use this option to add a table.
This option allows you to embed content from a model. Click here for more information.
Use this option to enter the fullscreen rich text editor mode.

Are you looking for our API Reference?

Check out our API Reference document on Rich Text

#Field configuration

Rich Text editor configuration

When you add a Rich Text field to a model in your schema, you will find the following options:

Tab	Field Name	Description
Settings	`Display Name`	Display name of your rich text field.
Settings	`API ID`	API ID of your Rich Text field. This field is autocompleted as you type in the display name, but can be edited.
Settings	`Description`	Optional field. You can add a description for your Rich Text field here.
Settings	`Enable embedding`	Select this checkbox to enable embedding, which will allow you to reference content inside rich text.
Settings	`Allow multiple values`	Select this checkbox to store a list of values instead of a single one.
Settings	`Localize field`	Select this checkbox to make the Rich Text field localized.
Settings	`Formatting options`	Use this dropdown menu to customize which buttons will appear in your rich text editor. You can read more about this menu here.
Validations	`Make field required`	Select this checkbox to make the rich text field required. If you select it, you won't be able to save the entry if the field is empty. This option cannot be edited after the initial save.
Validations	`Set field as unique`	Select this checkbox to set this field as unique. Selecting it ensures that multiple entries can't have the same value for this field.
Advanced	`Set initial value`	Select this checkbox to set an initial value to prefill the form input.
Advanced	`Show based on condition`	Select this checkbox to set condition visibility for this field. Check out our conditional fields document to learn more.
Advanced	`Field visibility`	Use this dropdown to select a field visibility option. The options are: read/write, read only, hidden, and API only.

#Customize your editor

When you configure your Rich Text field, you will find the Formatting options under Settings.

Rich Text editor configuration

This dropdown menu lets you select which buttons will display on your rich text field in the Content editor.

Rich Text editor configuration

By default, all checkboxes are selected. Deselect the buttons that you don't want in your rich text editor.

Pro Tip

You can change your formatting options after the initial save.

To do this, simply edit your Rich Text field and select/deselect the checkboxes according to your needs.

#Using the Rich Text editor

#Links

Click on the Link button to display the Insert link popup, which contains two tabs: Settings and Attributes.

#Settings

RTE - Insert link - Settings tab

Link type: Use the radio buttons to select one of the two options. Your selection modifies the fields displayed on screen.
- URL: Select this option to add a link to an external source.
- Entry: Select this option to add a link to an entry in your Hygraph project.
Link text: You can add text for your link in this field. If you are creating a URL link type and don't complete this field, the Link address will be used as Link text. This field becomes mandatory for the Entry link type. If you selected text before clicking on the link button, this field will be autocompleted with the selected text.
Link address: Mandatory field where you can type the URL you wish to link to. This field only displays for the URL link type.
Open link in new tab: Use this checkbox for your link to open in a new tab. It adds the target='_blank' attribute to your link. This field only displays for the URL link type.
Link title: Optional field where you can enter a tooltip to display on hover. This field only displays for the URL link type.
Select entry: Click on Add existing entry to select the entry in your Hygraph project that you wish to create a link to. Only models that can be embedded will display in the dropdown. This field only displays for the Entry link type.
Action buttons:
- Cancel: Click on this button to cancel the process.
- Insert: Click on this button to save the link and add it to your content entry.

#Attributes

You can optionally complete the following HTML attributes:

RTE - Insert link - Attributes tab

Rel attribute: This attribute defines the relationship between the current document and the linked resource.
Class attribute: This attribute specifies one or more classnames for an element. You can add classes separated with spaces here.
ID attribute: This attribute is used to specify a unique id for an HTML element.
Action buttons:
- Cancel: Click on this button to cancel the process.
- Insert: Click on this button to save the link and add it to your content entry.

#Assets

Clicking on the Assets button opens the Select Asset screen:

RTE - Select assets

Select an asset by clicking on the purple reference icon located at the beginning of each asset entry. This will automatically add the asset to your content.

If the asset you need has not yet been uploaded to your project, you can do so from here by click on the Upload button. This process follows the standard asset upload flow.

#Embeds

Use this option to create inline and/or block embeds.

Inline embeds give Content Creators maximum flexibility to add references or relations directly within the text so they can move faster. This also clears up clutter around content creation, so they are able to add things like authors, citations, product attributes and more without having to add extra fields within the content entry.

Block embeds give Content Creators more flexibility with less clutter. Use block embeds to insert assets and other models inside the text as a block. This can be useful when adding images like logos, or referencing audiences to previous created material that support the new content item like blog posts, documents, announcements, etc.

RTE - Embeds - Block embed screen example

Only the content from the selected models in the Rich Text field configuration is available to be embedded. To be able to embed content from more models, enable them from the Rich Text field settings in the schema builder.

Whether you add an inline or a block embed, both screens show the same options: Use the dropdown to select the model you wish to embed content from, then click on Select model.

The system will display the selection screen for the chosen model. To select an entry and add it to your content, simply click on the purple reference icon located at the beginning of each content entry.

To Edit or Remove an embed you've added to your Rich Text editor, click on the context menu icon of your embed and select the desired option.

#Resources

Rich Text field API Reference: Guide for developers on how to work with the Rich Text field.
Introducing the Hygraph React Rich Text Renderer: Blog post on how to render Hygraph documents using Rich Text in your application easily using our available packages.
Styling Rich Text with TailwindCSS: Detailed tutorial on how to use the JSON representation from the RTE to create custom elements for each text-based element of Rich Text.