|
1 | | -# CKEditor-Challenges-GHW-Beginners-Week-2025 |
| 1 | +# TinyMCE-Challenges-GHW-AI/ML-Week-2025 |
2 | 2 |
|
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. |
5 | 5 |
|
6 | 6 | ## Getting Help |
7 | 7 |
|
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! |
9 | 9 | * Each challenge is accompanied by helpful documentation |
10 | 10 |
|
11 | 11 | # Challenges |
12 | 12 |
|
13 | 13 | ## Challenge 1 |
14 | | -### Signup for a CKEditor account |
| 14 | +### Signup for a TinyMCE account |
15 | 15 |
|
16 | 16 | #### 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! |
19 | 18 | * Submit a screenshot of your new account on our day-of [GHW form](https://mlh.link/ghwform)! |
20 | 19 |
|
21 | 20 | ## Challenge 2 |
22 | | -### Use Builder to create a starter project |
| 21 | +### Getting Started: Setting Up TinyMCE |
23 | 22 |
|
24 | 23 | #### 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)! |
35 | 26 |
|
36 | 27 | ## 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 |
40 | 29 |
|
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)! |
48 | 33 |
|
49 | 34 | ## Challenge 4 |
50 | | -### Add and configure templates |
| 35 | +### Templates + Merge Tags |
51 | 36 | #### 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)! |
64 | 40 |
|
65 | 41 | ## Challenge 5 |
66 | | -### Add and configure merge fields |
| 42 | +### Inline CSS for Email Compatibility |
67 | 43 | #### 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