A feature of CKEditor is the ability to add skins, how is this done in Drupal 8?

For example I would like to better match my theme, there are some great skins available (e.g. flat skins).

Comments

Jeff Burnz created an issue. See original summary.

Wim Leers’s picture

Title: How to Skin Core CKEditor » Document how to skin Core CKEditor
Category: Support request » Task
Issue tags: +Documentation
Wim Leers’s picture

Assigned: Unassigned » mlewand

Pinged @mlewand from the CKEditor team with the question Is it possible to load a custom skin while still using D8's build of CKEditor that includes the moono skin? The answer to your question will depend on the CKEditor team's answer to my question :)

Jeff Burnz’s picture

Thanks Wim, thats great, atm I'm using some crazy hacks altering js settings to load styles to make it all work the way I want it to, it would be so much easier if we could load a skin using a library and it just worked :)

Wim Leers’s picture

@Jeff Burnz Well, worst case, you could create your own custom build of CKEditor. See core/assets/vendor/ckeditor/build-config.js. Follow the instructions in there, and change only one thing. Change:

var CKBUILDER_CONFIG = {
	skin: 'moono',

to:

var CKBUILDER_CONFIG = {
	skin: 'the_awesome_skin_that_jeff_made',
Wim Leers’s picture

… but that'll be a PITA to maintain. Could be a great short-term solution though.

mlewand’s picture

config.skin option allows you to change the skin. If it's not in the skins directory, you could even provide an external path as a value, more on this in our config.skin documentation.

Wim Leers’s picture

Status: Active » Fixed

@mlewand came through already as you can see

I've updated https://www.drupal.org/developing/api/8/ckeditor with this information. See the documentation additions: https://www.drupal.org/node/2617470/revisions/view/9775399/9784155.

I do realize this is somewhat painful. If this is a frequent enough request, we can perhaps let themes specify

ckeditor_stylesheets:
  - css/base/elements.css
  - css/components/captions.css
  - css/components/table.css
  - css/components/text-formatted.css
ckeditor_skin: path/to/myskin

That'd be a new feature request though.

Jeff Burnz’s picture

Status: Fixed » Needs work

hook_editor_js_settings_alter() does not fire in themes.

Jeff Burnz’s picture

Status: Needs work » Fixed

OK, this is totally doable in hook_js_settings_alter(), no idea how this passed me by before, perhaps we should make hook_editor_js_settings_alter() available to themes or document that themes should use hook_js_settings_alter()

Thanks for the push in the right direction guys, very much appreciated!

Wim Leers’s picture

Assigned: mlewand » Unassigned

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.