Create a Skin for TinyMCE

This guide explains how to manually create a new skin to customize the appearance of TinyMCE 5.

Prerequisites

Before beginning, ensure that:

Familiarity with the command line and basic commands is established.
Node.js and Yarn are already installed.
A basic understanding of Less, the CSS preprocessor used to build skins, is required. Specifically, review the section on variables.

Preparation

The CSS associated with a theme is called a skin. The default skin for TinyMCE 5 is Oxide, written in Less. Oxide introduces the Style API, which consists of approximately 300 variables that allow customization of TinyMCE without modifying the underlying CSS. This approach ensures compatibility with future updates and provides continued support for bug fixes.

Tiny recommends not modifying or overriding CSS rules directly.

Follow these steps to set up the skin development environment:

Download (or git clone) the TinyMCE source code.
Open a terminal and navigate to the folder you just downloaded.
Install dependencies and build the project using the following commands:
```
yarn && yarn dev && yarn build
```
Start the development server to preview skins:
```
yarn oxide-start
```
Once the server starts, open a browser and navigate to the displayed URL, typically http://localhost:3000.

The development environment is now setup and should look similar to the following:

If required to modify the skin without launching a web server, run yarn oxide-build instead of yarn oxide-start.

Creating or Editing a Skin

Ensure completion of the preparation steps before proceeding.

Directory Structure

Navigate to modules/oxide/src/less/skins/. This folder contains:

/ui: Contains editor UI skins. The main file here is skin.less.
/content: Contains skins for the content inside the editor.

The modules/oxide/src/less/theme/ folder contains Less files defining global styles. Most files list available variables at the top, such as colors, margins, and fonts. Variables are prefixed with @ (e.g., @background-color).

Do not edit these files directly. Instead, use them as references when creating a custom skin. Start by reviewing:

modules/oxide/src/less/theme/globals/global-variables.less
modules/oxide/src/less/theme/components/toolbar-button/toolbar-button.less

The typical workflow involves copying variables from the theme folder into the skins skin.less file and modifying them as needed.

Skins only affect the visual appearance of the UI. Element positioning is managed by TinyMCE’s UI framework.

Creating a Skin

Duplicate the default folder in modules/oxide/src/less/skins/ui/ and rename it.
Rebuild the project to recognize the newly created skins by running:
```
yarn build
```
Start the development server by running:
```
yarn oxide-start
```
If the server is already running, restart it (Ctrl+C) and run the command again.
Open modules/oxide/src/less/skin/ui/<your-skin-name>/skin.less.
Open a Less file from the theme folder (e.g., modules/oxide/src/less/theme/globals/global-variables.less) and copy a variable to modify. For example:
```
@background-color: red;
```

Paste the variable into the skin.less file.

The updated skin.less should look like this:

@import 'src/less/theme/theme';

//
// Place your variables here
//

@background-color: red;

Save the file and check the changes in a browser. Select the skin from the Skin menu.
The editor should now display with a red background.

This method allows customization of TinyMCE by modifying predefined variables, such as toolbar spacing or letter spacing.

Adjust TinyMCE configurations in modules/oxide/src/demo/index.html to match specific use cases.

Creating a Content CSS File

To modify the appearance of content inside the editor (e.g., headings, lists, quotes), create a content CSS file:

Create a folder in modules/oxide/src/less/skins/content/ and add a content.less file. Alternatively, duplicate an existing content CSS file.
Rebuild the project to recognize the newly created content skin.
```
yarn build
```
Start the development server:
```
yarn oxide-start
```
If the server is already running, restart it (Ctrl+C) and run the command again.
Add styles for relevant elements (h1 to h6, a, blockquote, code, table, etc.). For example:
```
h1 {
  color: red;
}
```
Save the file and check the changes in a browser.
The editor should now display with red headings.

Moving the Skin into TinyMCE

Copy the skin and/or content CSS from modules/oxide/build/skins/ to the appropriate folders in the production TinyMCE setup.
Update TinyMCE’s initialization options:
- Use the skin option for UI skins.
- Use the content_css option for content styles.

For details on specifying the skin file location, see this section.

Modifying Icons

For details on adding custom icons, see: Create an Icon Pack for TinyMCE.