https://github.com/hygraph/uix-tinymce

Example GraphCMS UI extension integrating the TinyMCE rich text editor
https://github.com/hygraph/uix-tinymce

Last synced: about 1 year ago
JSON representation

Example GraphCMS UI extension integrating the TinyMCE rich text editor

• Host: GitHub
• URL: https://github.com/hygraph/uix-tinymce
• Owner: hygraph
• Created: 2021-05-25T16:10:41.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2022-04-25T13:08:06.000Z (about 4 years ago)
• Last Synced: 2025-04-03T01:58:13.028Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://uix-tinymce.vercel.app/
• Size: 896 KB
• Stars: 3
• Watchers: 28
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# TinyMCE as a GraphCMS UI extension

⚠️ UI Extensions are still in early alpha and need to be activated on your GraphCMS project beforehand

This is a simple demo showcasing how to use a self-hosted TinyMCE as a UI Extension in GraphCMS.

## Deploy on Vercel

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fuix-tinymce)

When deployment is finished, do the following steps:

1. Click on **Go to Dashboard**

2. Right-click on **Visit** button, then Copy Link Address

3. Go to GraphCMS Project dashboard

4. Navigate to **Settings > UI Extensions**

5. Click on **Add UI Extension** button

6. Paste URL you've copied on step 2 into Extension URL field, then click on **Run compatibility test** button

7. (Optional) Check UI Extension Settings and update them accordingly

8. Finally, click on **Authorize & Install** button

Now that you've installed TinyMCE UI Extension, you're able to add it to any model on your schema.

## Usage

On GraphCMS dashboard, go to Schema and click on the model you want to add TinyMCE Editor.

It's available on Add Fields sidebar, under String fields. Just click on it to add it to your schema.