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
• TinyMCE Cloud Account
• OpenAI API Account

Installation and Initial Setup

1. Clone this repository:

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

2. Navigate to the project directory:

   cd tinymce-react-cms-ghw

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

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

Final Demo

Resources

• TinyMCE CMS Starter Config: Learn more at TinyMCE CMS Starter Config.
• Free Trial: Get started with TinyMCE for free at TinyMCE Free Trial.
• Installing TinyMCE: Follow the instructions at Installing TinyMCE.

Questions?

If you have any questions or issues, please reach out via GitHub or contact support via TinyMCE Contact Us Form.