Help teams manage content creation and approval in a clear and structured way
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Connect your Hygraph project to TinyMCE

TinyMCE is an open-source online rich-text editor. It converts HTML textarea fields, or other designated HTML elements, into editor instances.

#What you can do with the Hygraph-TinyMCE integration

With this app you can quickly generate HTML, creating and editing content in a format similar to using a word processor.

#Prerequisites to use this integration

  • You must have a Hygraph account. If you don't have one, you can create one here.
  • You must have a Hygraph project with at least one model.

#Install the TinyMCE app

Click here to install the TinyMCE App on Hygraph, then follow these steps:

  1. Use the dropdowns to select which project and environment you want to install the app in, then click on Install app.
  2. Click on Authorize app to authorize app permissions and move on to the configuration screen.
  3. Customize your toolbar options by selecting the checkboxes you want regarding formatting, alignment, indentation, history, styles, elements, headings, formats and miscellanea. You can come back and edit this selection later if you need to.
  4. Click Save Config Settings.

#Add the TinyMCE field to your model

  1. Navigate to the Schema builder.
  2. Select the model where you want to add the TinyMCE field.
  3. Select the TinyMCE field from the Add fields right sidebar.
  4. Complete the Display name field, and the API ID will be auto-filled by the system. Optionally, you can also add a Description.
  5. This screen also allows you to control different properties of your TinyMCE field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the Field options section of the screen.
  6. Click Add to save.

#Use TinyMCE in your Hygraph project

  1. Navigate to the Content editor.
  2. Select the view that you configured the TinyMCE field for.
  3. Click + Add entry or, alternatively, edit an existing entry by clicking on it.
  4. Locate the TinyMCE field section of the screen and you can start writing content in it right away. If any of the options you need are not visible, simply go back to the App Configuration screen and use the checkboxes to select it.
  5. Once you finish working on your content entry, click Save or Save & Publish depending on your workflow.

#Resources