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
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.Class button. A popup will display for you to type in the Class name, then click on Ok to finalize the process.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 SettingsDisplay 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. You cannot edit this setting after the initial save. 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 #LinksClick on the Link button to display the Insert link popup, which contains two tabs: Settings and Attributes.
RTE - Insert link - Settings tab
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.URL link type.target='_blank' attribute to your link. This field only displays for the URL link type.URL link type.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.You can optionally complete the following HTML attributes:
RTE - Insert link - Attributes tab
classnames for an element. You can add classes separated with spaces here.id for an HTML element.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.
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.
JSON representation from the RTE to create custom elements for each text-based element of Rich Text.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4