Create a new skin to alter the appearance of TinyMCE.
Note: The TinyMCE Skin Creator only supports TinyMCE 4.
Skin for TinyMCE 5 are written in less, 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.
- Download the TinyMCE skin tools.
- Install all dependencies with
- Issue the
npm run startcommand which also spins up a webserver for previewing the files (If you just want to build the files, use
npm run build) .
- Point your web browser of choice to the address shown in the terminal, usually
You now have the development environment set up and are ready to get to work.
Make sure you have performed the preparation step above.
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.
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.
- Begin by duplicating the
defaultfolder located in
src/less/skins/ui/and rename it to the name of your skin.
- Open the file
src/less/theme/globals/global-variables.lessand copy the variables you like to change to your
skin.lessfile in the folder you duplicated in the previous step. Change the values. The variables you put in
skin.lesswill override the default values.
- For more detailed customizations, review the variables in each component, such as
src/less/theme/components/toolbar-button.lessand copy the ones you want to change to
- To style interface elements in the content, such as selection color, drag handles, table of contents, bookmarks etc, copy variables to
content.inline.lessdepending on if you are using the inline mode or not.
- Preview your skin by building it using the
gulpcommand in your terminal.
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
- Create a folder in
src/less/skins/content/and create a
content.lessfile in it. Alternatively, you can duplicate any of the existing content skins.
- Add the relevant element selectors for your particular use case such as
- Simply copy your skin and/or content skin from `build/skins/ to the corresponding folders in your TinyMCE folder.
- Update your init function with the skin option and/or the content_css option.
Thanks for the feedback!
Can't find what you're looking for? Let us know.