Jump to content

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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

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/";
};
Link to post
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 post
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 post
Share on other sites

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.

Link to post
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 post
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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By fruid
      inserting links i.e. <a>-elements, and only links, inside a CKEditor-summary field outputs the link-text and a weird " /> above the content-div (I'm using markup regions).
      I have no idea where this is coming from, all the other tags work perfectly, and the CKEditor-markup is fine too when adding links. It puts the <a>-element inside a <p> element but should be alright?
      Any hints?
    • By fruid
      I doubt nobody has seen this issue before…
      when I have an <h2> or <h3> or the likes in a CKEditor-body-field and I delete that header, the h-tag is applied to whatever comes next in line. I'm obviously talking about the WYSIWYG-view. Similar bugs occur when applying an h-tag, that tag sometimes encloses the next line as well. Could be that this happens when the next line is in the same "block"-element and not technically a new line but separated with a <br> but not always…
      When will a new version of CKEditor for PW be released or what's a competitive alternative at this point?
    • By Jennifer Stock
      Hi. Sometimes when I select text in a textarea field outfitted with CK Editor, it fails to register as a "Block Style" and therefore the custom styles I have specified for block-level elements are not displayed in the Styles drop-down menu. If I open the page in an incognito window and select the same elements, the Block Style styles appear as expected in the Styles menu.
      Is this a caching issue of some kind? I've played with turning on and off the HTML "quality assurance" options as well as putting my custom styles directly within the CKEditor folder in the /wire directory. Once the field stops registering the selection of block-level elements, it also seems to have simultaneously stripped the custom styles that had been successfully applied to these block-level elements previously.
      Not sure what to do next.
    • By prestoav
      Hi all and thanks for the great work on PW!

      One thing I find I have to do on any new site is add the Justify plugin to textarea fields as it is such a widely required feature for text headings in content.

      ANy chance this could be added to the core an automatically be installed on new textarea fields using CKEditor?

      Thank you!
×
×
  • Create New...