# devrel-tinymce-react-cms-ghw

**Repository Path**: mirrors_tinymce/devrel-tinymce-react-cms-ghw

## Basic Information

- **Project Name**: devrel-tinymce-react-cms-ghw
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-20
- **Last Updated**: 2026-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TinyMCE MLH Global Hackweek Workshop: Building a Customizable Rich Text Editor for a CMS

**Presenter:** Mrina Sugosh (Tiny MCE)

## Goal

In this workshop, developers will learn how to set up and customize TinyMCE to create a powerful and flexible Content Management System (CMS). From basic editor setup to adding advanced features like AI-powered content assistance, accessibility, and version control, this session will guide you through creating a rich text editor tailored for a CMS.

- Set up TinyMCE within the React project.
- Integrate open-source plugins to enhance core rich text editing features.
- Add accessibility features or spellcheck to improve usability.
- Implement version control with the Revision History plugin.
- Add AI-powered content assistance using the AI Assistant.

## Prerequisites

- [Clone Boilerplate Code](https://github.com/mrinasugosh/tinymce-react-cms-ghw.git)
- [TinyMCE Cloud Account](https://www.tiny.cloud/get-tiny/?utm_campaign=mlh_devrel_global_hackweek&utm_source=mlh&utm_medium=referral&utm_term=github)
- [OpenAI API Account](https://platform.openai.com)

## Installation and Initial Setup

1. Clone this repository:

   ```sh
   git clone https://github.com/mrinasugosh/tinymce-react-cms-ghw.git
   ```

2. Navigate to the project directory:

   ```sh
   cd tinymce-react-cms-ghw
   ```

3. Install the dependencies:

   ```sh
   npm install
   ```

4. Start the development server:

   ```sh
   npm run dev
   ```

This will run the app in the development mode. Open [http://localhost:8080](http://localhost:8080) to view it in the browser.

## Final Demo

<img width="1458" alt="image" src="https://github.com/user-attachments/assets/7366a2ef-f786-437f-b103-15c0f51c933a">


## Resources

- **TinyMCE CMS Starter Config:** Learn more at [TinyMCE CMS Starter Config](https://tiny.cloud/solutions/cms-editor/?utm_campaign=mlh_devrel_global_hackweek&utm_source=mlh&utm_medium=referral&utm_term=github).
- **Free Trial:** Get started with TinyMCE for free at [TinyMCE Free Trial](https://tiny.cloud/pricing/?utm_campaign=mlh_devrel_global_hackweek&utm_source=mlh&utm_medium=referral&utm_term=github).
- **Installing TinyMCE:** Follow the instructions at [Installing TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/react-cloud/?utm_campaign=mlh_devrel_global_hackweek&utm_source=mlh&utm_medium=referral&utm_term=github).

## Questions?

If you have any questions or issues, please reach out via GitHub or contact support via [TinyMCE Contact Us Form](https://www.tiny.cloud/contact/?utm_campaign=mlh_devrel_global_hackweek&utm_source=mlh&utm_medium=referral&utm_term=github).