Jump to content

Skin CKEditor


Chris Falkenstein
 Share

Recommended Posts

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.

post-3015-0-16232200-1437149565_thumb.jp

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...