Skip to content

Commit 7d8757c

Browse files
authored
Update README.md
1 parent 9095243 commit 7d8757c

1 file changed

Lines changed: 21 additions & 55 deletions

File tree

README.md

Lines changed: 21 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,46 @@
1-
# CKEditor-Challenges-GHW-Beginners-Week-2025
1+
# TinyMCE-Challenges-GHW-AI/ML-Week-2025
22

3-
Hi Hackers! CKEditor is a great open source tool that allows users to create and edit web content within a browser, and so much more! <br><br>
4-
If you're looking for a great way to make your development projects more robust, CKEditor is a great way to get started.
3+
Hi Hackers! TinyMCE is a great open source tool that allows users to create and edit web content within a browser, and so much more! <br><br>
4+
If you're looking for a great way to make your development projects more robust, TinyMCE is a great way to get started.
55

66
## Getting Help
77

8-
* If you have any questions about CKEditor or their Global Hack Week challenges, head to the [MLH Discord](https://discord.mlh.io/) and find the #ask-CKEditor channel!
8+
* If you have any questions about TinyMCE or their Global Hack Week challenges, head to the [MLH Discord](https://discord.mlh.io/) and find the #ask-TinyMCE channel!
99
* Each challenge is accompanied by helpful documentation
1010

1111
# Challenges
1212

1313
## Challenge 1
14-
### Signup for a CKEditor account
14+
### Signup for a TinyMCE account
1515

1616
#### Objectives:
17-
* Head over to the CKEditor [sign up page](https://mlh.link/ghwbeginner25-ckeditor-signup) to create an account and obtain the trial license key.
18-
* In the CKEditor Customer Portal, navigate to the License keys tab to obtain your trial key.
17+
* Head over to the TinyMCE [sign up page](https://mlh.link/ghwaiml225-TinyMCE-signup) to create a free account, no credit card required!
1918
* Submit a screenshot of your new account on our day-of [GHW form](https://mlh.link/ghwform)!
2019

2120
## Challenge 2
22-
### Use Builder to create a starter project
21+
### Getting Started: Setting Up TinyMCE
2322

2423
#### Objectives:
25-
* Go to the Builder: Open the [CKEditor Builder](https://mlh.link/ghwbeginner25-ckeditor-builder) to start customizing your editor.
26-
* Select a Preset: Choose the Classic Editor preset as the foundation for your project.
27-
* Pick Features:
28-
* The preset includes pre-selected features.
29-
* Enable additional features manually from the list to meet your needs. Avoid including the following features because these are relevant for the following challenges: Code Block, Templates, and Merge Fields.
30-
* Customize the Toolbar: Customize the toolbar for an optimal experience.
31-
* Download the project:
32-
* Follow the setup steps provided by CKEditor Builder to generate the starter project. Specify Vanilla JS as technology and self-hosted as an integration method
33-
* Share your implementation with us on our submission form and bonus points if you add your project to our [Devpost Page](https://mlh.link/ghwdevpost)!
34-
24+
* Start by integrating TinyMCE into your web application, setting up the foundation for your email editor with help from [Windsurf AI](https://mlh.link/ghwaiml225-tinymce-windsurfai).
25+
* Share your implementation with us on our [submission form](https://mlh.link/ghwform)!
3526

3627
## Challenge 3
37-
### Add and configure the code block plugin
38-
#### Objectives:
39-
* Enhance your editor to support code blocks
28+
### Your Pair Programmer: Sign Up for an AI Code Editor
4029

41-
* **Steps to Complete:**
42-
1. Install the Plugin: Add the Code Block plugin to your CKEditor configuration.
43-
* Use the CodeBlock plugin import from the ckeditor5 package.
44-
* Add it to your plugins array in the configuration and items array of the toolbar.
45-
2. Customize the Plugin:
46-
* Define the programming languages you want to support. Each language should have a language and label properties.
47-
* Share your implementation with us on our submission form and bonus points if you add your project to our [Devpost Page](https://mlh.link/ghwdevpost)!
30+
#### Objectives:
31+
* Choose between [Windsurf AI](https://mlh.link/ghwaiml225-tinymce-windsurfai) or [Cursor AI](https://mlh.link/ghwaiml225-tinymce-cursorai) and see how an AI-powered coding assistant can speed up your workflow.
32+
* Share your implementation with us on our [submission form](https://mlh.link/ghwform)!
4833

4934
## Challenge 4
50-
### Add and configure templates
35+
### Templates + Merge Tags
5136
#### Objectives:
52-
* Implement templates for creating reusable document structures.
53-
54-
* **Steps to Complete:**
55-
1. Enable the Template Plugin: Add the template plugin by importing it from the ckeditor5-premium-features package.
56-
2. Include Templates to the Editor Setup: Add it to your plugins array in the configuration and items array of the toolbar.
57-
3. Define Templates:
58-
* By creating the _definitions array_, define the templates you want to use.
59-
* Each template should have the following:
60-
* **title** - short description of the template
61-
* **description** - longer description
62-
* **data** - a string that contains the HTML structure of a template
63-
* Share your implementation with us on our submission form and bonus points if you add your project to our [Devpost Page](https://mlh.link/ghwdevpost)!
37+
* Combine the power of predefined email templates with dynamic merge tags like {{FirstName}} or {{OrderNumber}}.
38+
* With [Windsurf AI](https://mlh.link/ghwaiml225-tinymce-windsurfai) or [Cursor AI](https://mlh.link/ghwaiml225-tinymce-cursorai), create reusable HTML structures and dynamic placeholders to personalize emails and add them to a TinyMCE Editor!
39+
* Share your implementation with us on our [Devpost Page](https://mlh.link/ghwdevpost)!
6440

6541
## Challenge 5
66-
### Add and configure merge fields
42+
### Inline CSS for Email Compatibility
6743
#### Objectives:
68-
* Use merge fields to insert reusable content dynamically
69-
70-
* Steps to Complete:
71-
1. Enable Merge Fields: Add the MergeFields plugin by importing it from the ckeditor5-premium-features package.
72-
2. Include Merge Fields to the Editor Setup: Add it to your plugins array in the configuration and items array of the toolbar.
73-
3. Define Merge Fields:
74-
* By creating the _definitions array_ inside the _mergeFields configuration_, define the merge fields you want to use.
75-
* Each one should have:
76-
* **id**
77-
* **label**
78-
* **defaultValue**
79-
4. Use Merge Fields in templates: By using the id in the template, incorporate Merge Fields in your templates.
80-
* Share your implementation with us on our submission form and bonus points if you add your project to our [Devpost Page](https://mlh.link/ghwdevpost)!
44+
* Ensure your emails are visually consistent across all email clients by adding inline CSS.
45+
* Use [Windsurf AI](https://mlh.link/ghwaiml225-tinymce-windsurfai) or [Cursor AI](https://mlh.link/ghwaiml225-tinymce-cursorai) to help you craft clean, email-safe CSS rules.
46+
* Share your implementation with us on our [Devpost Page](https://mlh.link/ghwdevpost)!

0 commit comments

Comments
 (0)