category | order | url | menu-title | meta-title-short |
---|---|---|---|---|
installing-components |
40 |
guide/dev_skins |
Installing Skins |
Installing Skins |
The look and feel of the CKEditor 4 user interface can be adjusted to your taste and customized through skins. Elements like the toolbar, dialog windows, buttons, and even their icons, can be changed to match the style of your website or application.
The default installation of CKEditor 4 comes with the Moono-Lisa skin.
The CKEditor Add-ons Repository is an online service designed to find and share editor plugins and skins. Its structure, with comprehensive descriptions and screenshots, makes it easy to understand the skin features and the comment system lets you socialize with the CKEditor 4 community or provide instant feedback. If you are a skin designer, the repository is also the best place to showcase your skills and reach a large user base.
If you found an interesting skin in the Add-ons Repository, you can easily add it to your custom build.
The easiest method is to visit the online builder page and select the skin that you wish to use in the Available Skins section.
{@img assets/img/add_skin_ckbuilder_3.png Available Skins lists in online builder}
When you are happy with your configuration, click the Download button at the bottom of the online builder page to download your custom build with the selected skin included.
When you install your custom build, you will see it uses the skin that you added (in this example: Kama).
{@img assets/img/add_skin_ckbuilder_4.png A custom CKEditor build using the Kama skin}
Visit the skin page in the Add-ons Repository and click the "Add to my editor" button.
{@img assets/img/add_plugin_ckbuilder_1.png Adding a skin to the editor build}
When you are ready, click the "Build my editor" button on the right to go to online builder. The skin that you have just added will be listed as a part of your custom build.
{@img assets/img/add_skin_ckbuilder_2.png Building a custom CKEditor version}
You can fine-tune your build in online builder and when you are happy with your configuration, click the Download button at the bottom of the online builder page to download your custom build with the selected skin included.
Using online builder is a recommended solution, however, if you have skins developed by yourself or by third parties, you can add skins to your local installation manually by following the steps described below:
-
Extract the skin
.zip
archive. -
Copy the skin files to the
skins
folder of your CKEditor 4 installation. Each skin must be placed in a sub-folder that matches its "technical" name.For example, the Kama skin would be installed into this folder:
<CKEditor folder>/skins/kama
. -
Enable the skin. Use the {@linkapi CKEDITOR.config#skin skin} setting to add the skin to your confiuration:
config.skin = 'kama';
Your skin will now be available in your CKEditor 4 installation.
To avoid the manual installation process submit your skins to the Add-ons Repository and encourage third-party developers to do so. In this way you will be able to both give something to the community and get valuable feedback on your work.