Skin CKEditor

[Chris Falkenstein]

How do you set a new skin for the CKEditor?

I downloaded the 'Minimalist' skin from the CKEditor site. I created a folder called 'skins' (e.g. /site/modules/InputfieldCKEditor/skins ). I then placed the new skin folder, minimalist, in the skins folder (e.g. /site/modules/InputfieldCKEditor/skins/minimalist ). Finally i navigated to the 'Custom Config Options' for my field and proceeded to input a number of iterations of what i thought could be the correct syntax based on it wanting json and what the CKEditor docs instruct.  See attached screen shot.

So after 2 hours trying I figured It was time to ask you good folks.  Yes. I read this post. It didn't help. 

It all seems very simple to do, but it is simply not working.

[Manfred62]

Hi Chris,

no solution here. But maybe a simple alternative: Lightwire Skin. That's a module, ready to use.

[Chris Falkenstein]

thanks.  i tried lightwire and it's a good alternative, but are these modules the only alternative to the default ckeditor skin?  does a ckeditor skin have to be built as a module in pw or is there a way to take what ckeditor offers (on their website) and use it within pw?

[Mike Rockett]

thanks.  i tried lightwire and it's a good alternative, but are these modules the only alternative to the default ckeditor skin?  does a ckeditor skin have to be built as a module in pw or is there a way to take what ckeditor offers (on their website) and use it within pw?

https://processwire.com/talk/topic/10336-lightwire-skin-for-ckeditor/?p=98429

It's just a matter of specifying it in the global config.

[Chris Falkenstein]

thanks for the reply, but that post is referring to the lightwire module which is indeed a skin and i got that to work, but i'm interested in knowing if it's possible to simply download any of the skins found on the ckeditor website - found here - and get those to work with PW. 

is this lightwire module doing something special to be compatible with PW?

i already fussed with that global config file (found at the location below) when i couldn't get things working with using the admin panel's 'custom config option'.

/site/modules/InputfieldCKEditor/config.js

[Mike Rockett]

I did it like that for the Office skin - it worked like a charm for me. Haven't tried with any others, but I think they'd be plug 'n play.

[LostKobrakai]

You're using the site/… folder, which I think in case of skins needs to be accessed by an absolute path pointing to the skin's folder. The default skins folder is in the wire/… folder, but there it'll be replaced on updates.

[Chris Falkenstein]

thanks for the replies. 

i know i applied all manor of paths and name/path combinations within the 2+ hours toying with this. 

Mike,

can you provide the exact config parameters that worked in your case when applying the 'office 2013' skin? AND, besides placing the folders/files in the proper location (path below), are there any other items that need attention? 

/site/modules/InputfieldCKEditor/skins/

[Beluga]

Is it not working for you, if you put this in the config.js:

CKEDITOR.editorConfig = function( config ) {
config.skin = "minimalist,/site/modules/InputfieldCKEditor/skins/minimalist/";
};

[Mike Rockett]

Mike,

can you provide the exact config parameters that worked in your case when applying the 'office 2013' skin? AND, besides placing the folders/files in the proper location (path below), are there any other items that need attention? 

/site/modules/InputfieldCKEditor/skins/

I used the same syntax as shown above.

So far as I know, nothing else needs attention - it should just work as expected.

[Chris Falkenstein]

thanks, but i already tried that.  and i just tried it again for good measure. 

it all seems simple, but it's simply not working. 

let me try the office 2013 skin just because that did work for Mike.  hold please...

well well well.  the office2013 skin works without a hitch. 

the minimalist skin says it's a port of another theme.  perhaps it depends on that theme's files?  i don't see any mention of that in the docs.

[Mike Rockett]

Interesting indeed. I believe that CKE skins do not depend on one another. A port is simply a copied version of the skin with modifications. Not entirely sure why minimalist isn't working as the code looks to be correct.

[Chris Falkenstein]

for one reason or another the 'minimalist' cke skin does not work with pw.  i feel this isn't a foul on pw's end. this is a foul on the skin's author's end.  

i was able to make the 'minimalist' skin work by stripping down it's 'skin.js' file to something less complex. for example the original 'skin.js' file looks like this...

/*
 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.skin.name="minimalist";CKEDITOR.skin.ua_editor="ie,iequirks,ie7,ie8,gecko";CKEDITOR.skin.ua_dialog="ie,iequirks,ie7,ie8";
CKEDITOR.skin.chameleon=function(){var b=function(){return function(b,e){for(var a=b.match(/[^#]./g),c=0;3>c;c++){var f=a,h=c,d;d=parseInt(a[c],16);d=("0"+(0>e?0|d*(1+e):0|d+(255-d)*e).toString(16)).slice(-2);f[h]=d}return"#"+a.join("")}}(),c=function(){var b=new CKEDITOR.template("background:#{to};background-image:-webkit-gradient(linear,lefttop,leftbottom,from({from}),to({to}));background-image:-moz-linear-gradient(top,{from},{to});background-image:-webkit-linear-gradient(top,{from},{to});background-image:-o-linear-gradient(top,{from},{to});background-image:-ms-linear-gradient(top,{from},{to});background-image:linear-gradient(top,{from},{to});filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='{from}',endColorstr='{to}');");return function(c,
a){return b.output({from:c,to:a})}}(),f={editor:new CKEDITOR.template("{id}.cke_chrome [border-color:{defaultBorder};] {id} .cke_top [ {defaultGradient}border-bottom-color:{defaultBorder};] {id} .cke_bottom [{defaultGradient}border-top-color:{defaultBorder};] {id} .cke_resizer [border-right-color:{ckeResizer}] {id} .cke_dialog_title [{defaultGradient}border-bottom-color:{defaultBorder};] {id} .cke_dialog_footer [{defaultGradient}outline-color:{defaultBorder};border-top-color:{defaultBorder};] {id} .cke_dialog_tab [{lightGradient}border-color:{defaultBorder};] {id} .cke_dialog_tab:hover [{mediumGradient}] {id} .cke_dialog_contents [border-top-color:{defaultBorder};] {id} .cke_dialog_tab_selected, {id} .cke_dialog_tab_selected:hover [background:{dialogTabSelected};border-bottom-color:{dialogTabSelectedBorder};] {id} .cke_dialog_body [background:{dialogBody};border-color:{defaultBorder};] {id} .cke_toolgroup [{lightGradient}border-color:{defaultBorder};] {id} a.cke_button_off:hover, {id} a.cke_button_off:focus, {id} a.cke_button_off:active [{mediumGradient}] {id} .cke_button_on [{ckeButtonOn}] {id} .cke_toolbar_separator [background-color: {ckeToolbarSeparator};] {id} .cke_combo_button [border-color:{defaultBorder};{lightGradient}] {id} a.cke_combo_button:hover, {id} a.cke_combo_button:focus, {id} .cke_combo_on a.cke_combo_button [border-color:{defaultBorder};{mediumGradient}] {id} .cke_path_item [color:{elementsPathColor};] {id} a.cke_path_item:hover, {id} a.cke_path_item:focus, {id} a.cke_path_item:active [background-color:{elementsPathBg};] {id}.cke_panel [border-color:{defaultBorder};] "),
panel:new CKEDITOR.template(".cke_panel_grouptitle [{lightGradient}border-color:{defaultBorder};] .cke_menubutton_icon [background-color:{menubuttonIcon};] .cke_menubutton:hover .cke_menubutton_icon, .cke_menubutton:focus .cke_menubutton_icon, .cke_menubutton:active .cke_menubutton_icon [background-color:{menubuttonIconHover};] .cke_menuseparator [background-color:{menubuttonIcon};] a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox [border-color:{defaultBorder};] a:hover.cke_colorauto, a:hover.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore [background-color:{ckeColorauto};border-color:{defaultBorder};] ")};
return function(g,e){var a=g.uiColor,a={id:"."+g.id,defaultBorder:b(a,-0.1),defaultGradient:c(b(a,0.9),a),lightGradient:c(b(a,1),b(a,0.7)),mediumGradient:c(b(a,0.8),b(a,0.5)),ckeButtonOn:c(b(a,0.6),b(a,0.7)),ckeResizer:b(a,-0.4),ckeToolbarSeparator:b(a,0.5),ckeColorauto:b(a,0.8),dialogBody:b(a,0.7),dialogTabSelected:c("#FFFFFF","#FFFFFF"),dialogTabSelectedBorder:"#FFF",elementsPathColor:b(a,-0.6),elementsPathBg:a,menubuttonIcon:b(a,0.5),menubuttonIconHover:b(a,0.3)};return f[e].output(a).replace(/\[/g,
"{").replace(/\]/g,"}")}}();

i stripped it down to this...

/*
 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.skin.name="minimalist";CKEDITOR.skin.ua_editor="";CKEDITOR.skin.ua_dialog="";CKEDITOR.skin.chameleon=function(){return""};

it worked. how well i'm not sure, but it did render the skin enough for me to realize that I can not fake the redactor wysiwyg.

this all exposes the fact that i really want the redactor wysiwyg editor and it's not going to happen for my current client.