Start trial
PricingContact Us
Log InStart For Free

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

Written by

Coco Poley

Category

World of WYSIWYG

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.

Skins and IconsTinyMCEDesign
byCoco Poley

Coco Poley is the Technical Content Marketer for TinyMCE - the leading WYSIWYG rich text editor powering 40% of the internet. Coco has over eight years of professional experience in technical content creation, educational material production, content writing, data engineering, and software quality assurance engineering.

Related Articles

  • World of WYSIWYGOct 23rd, 2024

    Upgrades to Enhanced Comments, Read-Only Templates - TinyMCE 7.4

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.