Text or treat: Free Spooky TinyMCE Theme for Halloween!

Text or Treat: Customize TinyMCE skin for Halloween with free spooky theme!

October 1st, 2024

2 min read

TinyMCE with a Halloween skin by TinyMCE

As fall leaves swirl and shadows creep across the moon, spooky season is officially here! This Halloween, give your rich text editor a festive touch with a special TinyMCE Halloween skin—no tricks, just a fun, visual treat. Whether you’re customizing for fun or surprising your users, follow along to give your WYSIWYG editor a spooky new look this October. 👻

With TinyMCE, the world’s most trusted customizable rich text editor, you can easily change its appearance by applying skins—no need for a complete UI overhaul. In this guide, we’ll walk you through the steps to apply a custom TinyMCE skin that adds a spooky Halloween touch.

How to Apply a Spooky Halloween Theme to TinyMCE

Prerequisites

Before diving in, you’ll need a working instance of TinyMCE. We’ll start with a basic initialization in a local HTML file, index.html. For clarity, let’s create a folder called tinymce-halloween-demo and put the index.html file inside it.

Don’t forget to replace the “no-api-key” text in your file with a real TinyMCE API key. If you don’t already have one, you can get a free API key with a 14-day TinyMCE premium trial today.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Replace 'no-api-key' in the link below with your API key -->
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
    referrerpolicy="origin"></script>
</head>

<body style="margin:15%;padding:0">
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'wordcount casechange export a11ychecker autocorrect',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough'
    });
  </script>
  <textarea>
    <h1>Welcome to TinyMCE!</h1>
  </textarea>
</body>

</html>

Step one: Download the TinyMCE Halloween theme

It’s easy to download the TinyMCE Halloween theme here. Move the skins folder into your tinymce-halloween-demo folder, where the index.html file is located.

Now you’re ready for step two!

Step two: Configure the location of the CSS

Next, we’ll configure the Halloween skin. TinyMCE uses the following configuration options:

content_css: This points to the CSS where the editor loads its styling from, such as /skins/content/tiny-halloween-2019/content.css.
skin_url: This specifies the location of the skin directory, such as /skins/ui/tiny-halloween-2019.

Add these options to the initialization code in index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Replace 'no-api-key' in the link below with your API key -->
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
    referrerpolicy="origin"></script>
</head>

<body style="margin:15%;padding:0">
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'wordcount casechange export a11ychecker autocorrect',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough',
      skin_url: "/skins/ui/tiny-halloween-2019",
      content_css: "/skins/content/tiny-halloween-2019/content.css"
    });
  </script>
  <textarea>
    <h1>Welcome to TinyMCE!</h1>
  </textarea>
</body>

</html>

Save your index.html file and you’re ready for the next step.

Step three: Test your new Halloween theme

With everything configured, let’s test the new theme! Open a terminal, navigate to the tinymce-halloween-demo folder, and run the following commands:

npm install
http-server

Now, go to http://localhost:8080/ in your browser, where you’ll see your spooky Halloween-themed TinyMCE editor in action! 🎃

Create a custom skin for TinyMCE

Want to creating a custom skin in TinyMCE? It's a simple process that allows you to tailor the editor’s appearance via a CSS file. You can tweak everything from toolbar colors and button styles to backgrounds, giving you full control over the editor's look. Once you’ve made your changes, load the new skin by setting the skin options in your TinyMCE initialization.

Take it further with Enhanced Skins and Icons

Looking for even more customization? The Enhanced Skins and Icons premium plugin gives you full control over toolbar icons, spacing, and hover effects—helping you create a fully branded experience.

With access to professionally designed icon sets and additional UI options, this plugin lets you tailor every visual detail to match your exact vision.

Ready to enhance your editor’s design? Continue your TinyMCE premium trial, including Enhanced Skins and Icons, and explore how much further you can customize your content creation experience.