The **icons** option allows replacing and extending icons through an icon pack. Documentation on how to create an icon pack will be added shortly.
On setup, TinyMCE will attempt to load any icon pack specified by the **icons** option. The set of icons from the icon pack will be merged with TinyMCE's default icons where the icons from the icon pack takes higher precedence. This means that an icon pack may choose to simply replace a few of the default icons and/or extend the total set.
TinyMCE will attempt to load the icon pack from the path `baseURL/icons/${iconPackName}/icons.js` on initialization where baseURL refers to the root directory of TinyMCE. This is similar to how TinyMCE would load a plugin.
**Type:** `String`
##### Example
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
@ -7,53 +7,160 @@ description: Introducing skin creation, less and icon modification.
keywords: create creator skin icon
---
Create a new skin to alter the appearance of TinyMCE.
This section provides information on how to create a new skin to alter the appearance of TinyMCE.
This guide assumes you have basic understanding of [Node](http://nodejs.org) and [Gulp](http://gulpjs.com) and know your way around a terminal.
## Prerequisites:
This guide assumes:
* Basic understanding of [Node.js](http://nodejs.org) and [Gulp](http://gulpjs.com).
* Familiarity with the command line and running simple commands.
> Note: The [TinyMCE Skin Creator](http://skin.tinymce.com/) only supports TinyMCE 4.
## Preparation
Skin for TinyMCE 5 are written in [less](http://lesscss.org), a popular CSS preprocessor. Making a skin primarily involves modifying variables which you can consider a kind of API. You are not supposed to modify or override CSS rules, instead you override the less variables in your skin files. This makes updating TinyMCE much easier.
A skin for TinyMCE 5 is written in [less](http://lesscss.org), a popular CSS preprocessor. Making a skin primarily involves modifying variables similar to using an API. The CSS rules are not modified or overridden, instead the `less` variables in the `skin` files is modified. This makes updating TinyMCE easier.
> Important: TinyMCE does not recommend modifying or overriding CSS rules directly.
1. Download (or `git clone`) the [TinyMCE skin tools](https://github.com/tinymce/oxide).
1. Open a terminal and `cd` into the `/oxide` directory.
1. Run the following command to install all dependencies:
```js
npm install
```
4. To start `gulp` and spin up a web server for previewing the files, run the following command:
```js
npm run start
```
> This command starts the preview server at the URL `http://localhost:3000` and starts watching the filesystem for changes.
1. Download the [TinyMCE skin tools](https://github.com/tinymce/oxide).
2. Install all dependencies with `npm install`.
3. Issue the `npm run start` command which also spins up a webserver for previewing the files (If you just want to build the files, use `npm run build`) .
4. Point your web browser of choice to the address shown in the terminal, usually `localhost:3000`.
> Note: Run the following command to just build the files:
```
npm run build
```
You now have the development environment set up and are ready to get to work.
### Result:
The development environment is set up and ready to work.
## Making or editing a skin
Make sure you have performed the preparation step above.
The preparation steps above must be performed to create or edit a skin.
### Overview
### Orientation
In the `/oxide` directory, navigate to `src/less/skins/`. There are two folders in this location:
* `/ui` - which is the skins for the editor.
* `/content` - which is the skins for the content within the editor.
Begin by looking in the `src/less/skins/` folder where you find two folders: `ui` which is the skins for the editor and `content` which skins the content within the editor. The skin imports the theme `less` files located in `src/less/theme/`. You are not supposed to edit the CSS in the theme folder, instead we have created variables for relevant css properties such as colors, margins and spacings which you use in your skin file to customize TinyMCE. This have multiple benefits: you can do quite advanced changes and still easily update TinyMCE since the only thing you have changed is a variable file, and you benefit from all the browser testing we make.
The skin imports the theme `less` files located in the `src/less/theme/` directory.
To create a skin, the CSS in the `/theme` folder is not required to be edited. Instead, TinyMCE provides variables for the relevant CSS properties, such as colors, margins, and spacings, that are used in the skin file to customize TinyMCE.
This allows the user to easily update the TinyMCE instance despite making advanced changes to the skin, since the only thing that is changed is a variable file. Another benefit of this approach is that the user gains access to all the variables that have been tested to work together with the browsers.
> Note: The skin **only** changes the visual presentation of the UI and **not** the placement of elements. Placement of elements is done by the TinyMCE UI framework. This framework makes it possible to do complex UI layouts on all browsers without touching any CSS when plugins are created.
### Creating a skin
1. Begin by duplicating the `default` folder located in `src/less/skins/ui/` and rename it to the name of your skin.
2. Open the file `src/less/theme/globals/global-variables.less` and **copy** the variables you like to change to your `skin.less` file in the folder you duplicated in the previous step. Change the values. The variables you put in `skin.less` will override the default values.
3. For more detailed customizations, review the variables in each component, such as `src/less/theme/components/toolbar-button.less` and copy the ones you want to change to `skin.less`.
4. To style interface elements in the content, such as selection color, drag handles, table of contents, bookmarks etc, copy variables to `src/less/skins/ui/<skin-name>/content.less` or `content.inline.less` depending on if you are using the inline mode or not.
5. Preview your skin by building it using the `gulp` command in your terminal.
1. In the `/oxide` directory, begin by duplicating the `default` folder located in `src/less/skins/ui/` and rename it to the name of your skin.
1. Open the file `src/less/theme/globals/global-variables.less` and **copy** the variables to change into the `skin.less` file of the duplicate folder in the previous step.
1. Change the values. The variables in the `skin.less` will override the default values.
For more detailed customizations, review the variables in each component, such as `src/less/theme/components/toolbar-button.less` and copy the desired ones to the `skin.less`.
To style interface elements in the content, such as selection color, drag handles, table of contents, bookmarks etc, copy variables to `src/less/skins/ui/<skin-name>/content.less` or `content.inline.less` (if inline mode is being used).
Following is an example of a sample `skin.less` file:
```js
/**
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
* Licensed under the LGPL or a commercial license.
* For LGPL see License.txt in the project root for license information.
* For commercial licenses see https://www.tiny.cloud/
*/
@import 'src/less/theme/theme';
### Creating a content css
//
// Root variables
// Begin customization by changing these variables as most other variables are derivatives of these.
1. To preview the new skin, run the following command from a terminal:
```js
npm run start
```
2. Navigate to the address shown in the terminal, usually `localhost:3000`. The TinyMCE skin SDK for Silver theme development environment page will appear in the browser.
3. In the **Editor examples** section, select the new skin from the **UI skin** drop-down menu.
TinyMCE editor with all the configured skin changes will appear in the browser screen.
### Creating a content CSS file
To update the appearance of the content within the editor, such as headings, quotes, lists etc you create a content css. These are located in `src/less/skin/content/`
1. Create a folder in `src/less/skins/content/` and create a `content.less` file in it. Alternatively, you can duplicate any of the existing content skins.
2. Add the relevant element selectors for your particular use case such as `h1` to `h6`, `a`, `blockquote`, `code`, `table`.
1. Create a folder in `src/less/skins/content/` and create a `content.less` file in it. Alternatively, any of the existing content skins can be duplicated.
2. Add the relevant element selectors for the desired use case such as `h1` to `h6`, `a`, `blockquote`, `code`, `table`, etc.
### Moving the skin into TinyMCE
1. Copy the skin and/or content skin from `build/skins/` to the corresponding folders in the duplicate TinyMCE folder.
2. Update the init function with the [skin](https://www.tiny.cloud/docs-beta/configure/editor-appearance/#skin) option and/or the [content_css](https://www.tiny.cloud/docs-beta/configure/content-appearance/#content_css) option.
#### Example
Following is an example of a sample `init` configuration for moving the configured skin into a TinyMCE instance.
1. Simply copy your skin and/or content skin from `build/skins/ to the corresponding folders in your TinyMCE folder.
2. Update your init function with the [skin](https://www.tiny.cloud/docs-beta/configure/editor-appearance/#skin) option and/or the [content_css](https://www.tiny.cloud/docs-beta/configure/content-appearance/#content_css) option.
For more information on how to specify the location of the skin file, see [this]({{site.baseurl}}/configure/editor-appearance/#skin_url) section.
<!-- ## Modifying the icons
## Modifying the icons
Documentation on how to change the icons will be added here shortly.-->
Documentation on how to change the icons will be added here shortly.
@ -6,7 +6,7 @@ description: Learn how to change the appearance of TinyMCE.
keywords: themes skins statusbar
---
This section is about customizing TinyMCE's user interface with skins, toolbar buttons and manipulating the status bar.
This section is about customizing TinyMCE's user interface with skins, toolbar buttons, and manipulating the status bar.
### Themes
@ -14,7 +14,7 @@ This section is about customizing TinyMCE's user interface with skins, toolbar b
### Skins
Skins controls the appearance of TinyMCE such as colors and spacings. The default skin is called "Oxide" and we have included a light and a dark version. The default skin is white. To get the dark version, use the following config:
Skins control the appearance of TinyMCE such as colors and spacing. The default skin is called **Oxide** and has a `light` and a `dark` version. The default skin is `white`. To get the dark version, use the following config:
```js
tinymce.init({
@ -23,7 +23,7 @@ tinymce.init({
});
```
Making your own skins for TinyMCE is easy with our Skin tool project. See [Creating a skin]({{ site.baseurl }}/advanced/creating-a-skin/) for more details.
Creating skins for TinyMCE is easy with the TinyMCE Skin tool project. See [Creating a skin]({{ site.baseurl }}/advanced/creating-a-skin/) for more details.
> Note: The [TinyMCE Skin Creator](http://skin.tinymce.com/) only supports TinyMCE 4.
@ -31,7 +31,7 @@ Making your own skins for TinyMCE is easy with our Skin tool project. See [Creat
### Changing editor height and width
A common UI customization used by developers is changing the height and width of the editable area. The following examples are code snippets that change TinyMCE height and width.
A common UI customization used by developers is changing the height and width of the editable area. The following examples are code snippets that change TinyMCE's height and width.
> Note: The links below contain specific details of these customization options.
@ -95,11 +95,15 @@ tinyMCE.init({
See the [content_css]({{ site.baseurl }}/configure/content-appearance/#content_css) customization page for more information about the use of absolute and relative paths as well as and how to use multiple stylesheets.
> Note: We have included two aditional content CSS:es you can try out: Document and Writer. Use `content_css: 'document'` or `content_css: 'writer'` to try them out.
> Note: We have included two aditional themes for `content_css` to try out: **Document** and **Writer**. Use `content_css: 'document'` or `content_css: 'writer'` to try them out.
### Hiding the status bar
The status bar is the gray bar aligned to the bottom of the editor's editable area. The status bar contains the path information and the resize handle. Removing the status bar disables the ability for users to change the size of the editable area. The following example disables the status bar.
The status bar is the gray bar aligned to the bottom of the editor's editable area. The status bar contains the path information and the resize handle. Removing the status bar disables the ability for users to change the size of the editable area.
#### Example
The following example disables the status bar.
```js
tinymce.init({
@ -107,6 +111,7 @@ tinymce.init({
statusbar: false
});
```
> Note: Refer to the plugins and advanced configuration options documentation for more information on how to restrict whether the resize handle can be dragged.
### Adding the code button plugin
@ -125,6 +130,8 @@ tinymce.init({
All of the buttons disappear after the `code` button is added to the toolbar and a new menu called `Tools` with the menu item `Source code` is created. (See [this page]({{ site.baseurl }}/quick-start/) for a basic HTML code block.)
#### Example
The following example displays the default toolbar in addition to the `code` functionality:
Shikha
7 years ago
