Rich Text editor

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:

1. 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.
2. These typography options allow you to make text bold, italic, or underlined.
3. Use this option to add a link. Click here for more information.
4. Use this option to format the text as a block quote.
5. Use this option to format the text as inline code.
6. This option allows you to include an asset. Click here for more information.
7. Use these options to create either a bulleted or numbered list.
8. Use this option to format the text as a code block.
9. 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.
10. 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.
11. Use this option to add a table.
12. This option allows you to embed content from a model. Click here for more information.
13. Use this option to enter the fullscreen rich text editor mode.

LinksAnchor

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

SettingsAnchor

• 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 autopopulated 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.

AttributesAnchor

You can optionally complete the following HTML attributes:

• 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.

AssetsAnchor

Clicking on the Assets button opens the Select Asset screen:

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.

EmbedsAnchor

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.

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.

ResourcesAnchor

• Hygraph's Rich Text editor: Hygraph's UI Rich Text field feature walkthrough.
• Rich Text field developer guide: Guide for developers on how to use 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.